├── server
    ├── .gitignore
    ├── routes
    │   ├── UserRoute.js
    │   ├── MatchRoute.js
    │   ├── ProtectedRoute.js
    │   ├── CloudinaryRoute.js
    │   ├── ReportRoute.js
    │   ├── FoundRoute.js
    │   ├── AuthRoutes.js
    │   └── Mailroute.js
    ├── config
    │   ├── firebaseConfig.js
    │   └── CloudinaryConfig.js
    ├── middleware
    │   └── authmiddle.js
    ├── package.json
    ├── app.js
    └── controllers
    │   ├── nearby.js
    │   ├── UserControl.js
    │   └── matchControl.js
├── client
    ├── versal.json
    ├── src
    │   ├── assets
    │   │   ├── ReturnIt.png
    │   │   └── badges.jsx
    │   ├── App.css
    │   ├── main.jsx
    │   ├── components
    │   │   ├── loading.jsx
    │   │   ├── spin.jsx
    │   │   ├── theme.jsx
    │   │   └── MapComponent.jsx
    │   ├── firebaseConfig.js
    │   ├── App.jsx
    │   └── pages
    │   │   ├── Login.jsx
    │   │   ├── welcome.jsx
    │   │   ├── SignUp.jsx
    │   │   ├── Report.jsx
    │   │   ├── Recent.jsx
    │   │   ├── Found.jsx
    │   │   ├── Nearby.jsx
    │   │   ├── Home.jsx
    │   │   ├── Profile.jsx
    │   │   ├── UpdateProfile.jsx
    │   │   ├── Forum.jsx
    │   │   └── Adminpage.jsx
    ├── vite.config.js
    ├── .gitignore
    ├── index.html
    ├── eslint.config.js
    ├── package.json
    └── README.md
└── README.md


/server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | /config/*.json
4 | .env


--------------------------------------------------------------------------------
/client/versal.json:
--------------------------------------------------------------------------------
1 | {
2 |    "rewrites": [
3 |     { "source": "/(.*)", "destination": "/index.html" }
4 |   ]
5 | }


--------------------------------------------------------------------------------
/client/src/assets/ReturnIt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Srinanth/Lost_AND_Found/HEAD/client/src/assets/ReturnIt.png


--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @import "leaflet/dist/leaflet.css";
3 | 
4 | .dark body {
5 |     background-color: #121212;
6 |     color: white;
7 |   }


--------------------------------------------------------------------------------
/client/src/main.jsx:
--------------------------------------------------------------------------------
 1 | import { StrictMode } from 'react'
 2 | import { createRoot } from 'react-dom/client'
 3 | import App from './App.jsx'
 4 | 
 5 | createRoot(document.getElementById('root')).render(
 6 |   <StrictMode>
 7 |     <App />
 8 |   </StrictMode>,
 9 | )
10 | 


--------------------------------------------------------------------------------
/server/routes/UserRoute.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import { getUserProfile, updateUserProfile } from "../controllers/UserControl.js";
 3 | 
 4 | const ProfileRouter = express.Router();
 5 | 
 6 | ProfileRouter.get("/profile/:userId", getUserProfile);
 7 | ProfileRouter.put("/update/:userId", updateUserProfile);
 8 | 
 9 | export default ProfileRouter;
10 | 


--------------------------------------------------------------------------------
/client/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite'
 2 | import react from '@vitejs/plugin-react-swc'
 3 | import tailwindcss from '@tailwindcss/vite'
 4 | 
 5 | 
 6 | // https://vite.dev/config/
 7 | export default defineConfig({
 8 |   plugins: [ tailwindcss(),react()],
 9 |   base: './',
10 |   server: {
11 |     historyApiFallback: true, // Fixes 404 errors on refresh
12 |   }
13 | })
14 | 


--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | 
27 | .env
28 | package-lock.json
29 | 


--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/src/assets/ReturnIt.png" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>ReturnIt</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.jsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/server/config/firebaseConfig.js:
--------------------------------------------------------------------------------
 1 | import admin from "firebase-admin";
 2 | import dotenv from "dotenv";
 3 | 
 4 | dotenv.config();
 5 | 
 6 | // Parse Firebase credentials from the environment variable
 7 | const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);
 8 | 
 9 | admin.initializeApp({
10 |   credential: admin.credential.cert(serviceAccount),
11 | });
12 | 
13 | 
14 | export const db = admin.firestore();
15 | export const auth = admin.auth();
16 | 
17 | console.log("🔥 Firebase connected successfully!");
18 | 


--------------------------------------------------------------------------------
/server/routes/MatchRoute.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import { matchUserItems } from "../controllers/matchControl.js"; 
 3 | 
 4 | const Matchrouter = express.Router();
 5 | 
 6 | Matchrouter.get("/matches/:userId", async (req, res) => {
 7 |   try {
 8 |     const userId = req.params.userId;
 9 |     const matches = await matchUserItems(userId);
10 |     res.status(200).json(matches);
11 |   } catch (error) {
12 |     console.error("Error fetching matches:", error);
13 |     res.status(500).json({ error: "Failed to fetch matches" });
14 |   }
15 | });
16 | 
17 | export default Matchrouter


--------------------------------------------------------------------------------
/client/src/components/loading.jsx:
--------------------------------------------------------------------------------
 1 | const LoadingScreen = ({ isDarkMode }) => {
 2 |     return (
 3 |       <div
 4 |         className={`flex items-center justify-center h-screen w-full transition-all duration-500 ${
 5 |           isDarkMode ? 'bg-black text-blue-400' : 'bg-white text-blue-600'
 6 |         }`}
 7 |       >
 8 |         <h1 className="text-4xl font-bold animate-pulse scale-110 transition-all duration-700">
 9 |           Return<span className="animate-bounce inline-block">It</span>
10 |         </h1>
11 |       </div>
12 |     );
13 |   };
14 |   
15 |   export default LoadingScreen;
16 |   


--------------------------------------------------------------------------------
/server/middleware/authmiddle.js:
--------------------------------------------------------------------------------
 1 | import { auth } from "../config/firebaseConfig.js";
 2 | 
 3 | export const verifyUser = async (req, res, next) => {
 4 |   try {
 5 |     const token = req.headers.authorization?.split("Bearer ")[1];
 6 |     if (!token) return res.status(401).json({ message: "No token provided" });
 7 | 
 8 |     const decodedToken = await auth.verifyIdToken(token);
 9 |     req.user = decodedToken;
10 |     next();
11 |   } catch (error) {
12 |     console.error("Token Verification Error:", error.message);
13 |     return res.status(403).json({ message: "Unauthorized" });
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/client/src/components/spin.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const Spinner = ({ size = "md", color = "blue" }) => {
 4 |   const sizeClasses = {
 5 |     sm: 'w-6 h-6 border-2',
 6 |     md: 'w-10 h-10 border-4',
 7 |     lg: 'w-14 h-14 border-6',
 8 |   };
 9 | 
10 |   const colorClasses = {
11 |     blue: 'border-blue-500 border-t-transparent',
12 |     white: 'border-white border-t-transparent',
13 |   };
14 | 
15 |   const selectedSizeClass = sizeClasses[size] || sizeClasses.md;
16 |   const selectedColorClass = colorClasses[color] || colorClasses.blue;
17 | 
18 |   return (
19 |     <div className={`animate-spin rounded-full ${selectedSizeClass} ${selectedColorClass} border-solid`}></div>
20 |   );
21 | };
22 | 
23 | export default Spinner;


--------------------------------------------------------------------------------
/server/routes/ProtectedRoute.js:
--------------------------------------------------------------------------------
 1 | // import express from "express";
 2 | // import { verifyUser } from "../middleware/authmiddle.js";
 3 | // import { db } from "../config/firebaseConfig.js";
 4 | 
 5 | // const ProtectedRouter = express.Router();
 6 | 
 7 | 
 8 | // ProtectedRouter.get("/profile", verifyUser, async (req, res) => {
 9 | //   try {
10 | //     const userDoc = await db.collection("users").doc(req.user.email).get();
11 | //     if (!userDoc.exists) return res.status(404).json({ error: "User not found" });
12 | 
13 | //     return res.json({ user: userDoc.data() });
14 | //   } catch (error) {
15 | //     return res.status(500).json({ error: error.message });
16 | //   }
17 | // });
18 | 
19 | 
20 | 
21 | // export default ProtectedRouter;
22 | 


--------------------------------------------------------------------------------
/client/src/firebaseConfig.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from "firebase/app";
 2 | import { getStorage } from "firebase/storage";
 3 | import { getAuth, GoogleAuthProvider } from "firebase/auth";
 4 | 
 5 | 
 6 | 
 7 | const firebaseConfig = {
 8 |   apiKey: "AIzaSyAeH1zRH8nrNxP5QxFadiyJhzoVT-j1qSk",
 9 |   authDomain: "match-making-a1c79.firebaseapp.com",
10 |   projectId: "match-making-a1c79",
11 |   storageBucket: "match-making-a1c79.firebasestorage.app",
12 |   messagingSenderId: "1003305083842",
13 |   appId: "1:1003305083842:web:63ffb634836d41780c2c5b",
14 |   measurementId: "G-0GKW8800LZ"
15 | };
16 | 
17 | // Initialize Firebase
18 | export const app = initializeApp(firebaseConfig);
19 | export const auth = getAuth(app);
20 | export const googleProvider = new GoogleAuthProvider();
21 | export const storage = getStorage(app);


--------------------------------------------------------------------------------
/client/src/components/theme.jsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useState, useContext } from "react";
 2 | import { useEffect } from "react";
 3 | 
 4 | const ThemeContext = createContext();
 5 | 
 6 | export const useTheme = () => {
 7 |   return useContext(ThemeContext);
 8 | };
 9 | 
10 | export const ThemeProvider = ({ children }) => {
11 |   const [darkMode, setDarkMode] = useState(false);
12 | 
13 |   const toggleDarkMode = () => {
14 |     setDarkMode(prev => !prev);
15 |   };
16 | 
17 |   return (
18 |     <ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
19 |       {children}
20 |     </ThemeContext.Provider>
21 |   );
22 | };
23 | 
24 | export const useThemeEffect = () => {
25 |     useEffect(() => {
26 |       const darkTheme = localStorage.getItem("theme") === "dark";
27 |       if (darkTheme) {
28 |         document.documentElement.classList.add("dark");
29 |       } else {
30 |         document.documentElement.classList.remove("dark");
31 |       }
32 |     }, []);
33 |   };


--------------------------------------------------------------------------------
/client/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js'
 2 | import globals from 'globals'
 3 | import reactHooks from 'eslint-plugin-react-hooks'
 4 | import reactRefresh from 'eslint-plugin-react-refresh'
 5 | 
 6 | export default [
 7 |   { ignores: ['dist'] },
 8 |   {
 9 |     files: ['**/*.{js,jsx}'],
10 |     languageOptions: {
11 |       ecmaVersion: 2020,
12 |       globals: globals.browser,
13 |       parserOptions: {
14 |         ecmaVersion: 'latest',
15 |         ecmaFeatures: { jsx: true },
16 |         sourceType: 'module',
17 |       },
18 |     },
19 |     plugins: {
20 |       'react-hooks': reactHooks,
21 |       'react-refresh': reactRefresh,
22 |     },
23 |     rules: {
24 |       ...js.configs.recommended.rules,
25 |       ...reactHooks.configs.recommended.rules,
26 |       'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
27 |       'react-refresh/only-export-components': [
28 |         'warn',
29 |         { allowConstantExport: true },
30 |       ],
31 |     },
32 |   },
33 | ]
34 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "node",
 3 |   "version": "1.0.0",
 4 |   "type": "module",
 5 |   "main": "app.js",
 6 |   "scripts": {
 7 |     "start": "node app.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/Srinanth/Los_N_Foun-.git"
12 |   },
13 |   "author": "",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/Srinanth/Los_N_Foun-/issues"
17 |   },
18 |   "homepage": "https://github.com/Srinanth/Los_N_Foun-#readme",
19 |   "description": "",
20 |   "dependencies": {
21 |     "axios": "^1.8.3",
22 |     "bcrypt": "^5.1.1",
23 |     "bcryptjs": "^3.0.2",
24 |     "cloudinary": "^2.6.0",
25 |     "cors": "^2.8.5",
26 |     "dotenv": "^16.4.7",
27 |     "express": "^4.21.2",
28 |     "firebase": "^11.5.0",
29 |     "firebase-admin": "^13.2.0",
30 |     "geofire-common": "^6.0.0",
31 |     "jsonwebtoken": "^9.0.2",
32 |     "multer": "^2.0.1",
33 |     "nodemailer": "^6.10.0",
34 |     "streamifier": "^0.1.1",
35 |     "uuid": "^11.1.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/server/routes/CloudinaryRoute.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import multer from "multer";
 3 | import { uploadToCloudinary, deleteFromCloudinary } from "../config/CloudinaryConfig.js";
 4 | 
 5 | const Cloudrouter = express.Router();
 6 | const upload = multer();
 7 | 
 8 | 
 9 | Cloudrouter.post("/upload", upload.single("image"), async (req, res) => {
10 |   if (!req.file) {
11 |     return res.status(400).json({ error: "No file uploaded" });
12 |   }
13 | 
14 |   try {
15 |     const result = await uploadToCloudinary(req.file.buffer); 
16 |     res.json({ imageUrl: result.secure_url }); 
17 |   } catch (error) {
18 |     res.status(500).json({ error: "Image upload failed" });
19 |   }
20 | });
21 | 
22 | Cloudrouter.delete("/delete-image", async (req, res) => {
23 |   const { publicId } = req.body;
24 | 
25 |   try {
26 |     const result = await deleteFromCloudinary(publicId);
27 |     res.json({ message: "Image deleted successfully", result });
28 |   } catch (error) {
29 |     res.status(500).json({ error: "Image deletion failed" });
30 |   }
31 | });
32 | 
33 | export default Cloudrouter;


--------------------------------------------------------------------------------
/server/app.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import dotenv from "dotenv";
 3 | import UserRouter from "./routes/AuthRoutes.js";
 4 | import cors from "cors";
 5 | // import ProtectedRouter from "./routes/ProtectedRoute.js";
 6 | import Cloudrouter from "./routes/CloudinaryRoute.js";
 7 | import Reportrouter from "./routes/ReportRoute.js";
 8 | import FoundRouter from "./routes/FoundRoute.js";
 9 | import Matchrouter from "./routes/MatchRoute.js";
10 | import ProfileRouter from "./routes/UserRoute.js";
11 | import NearbyRoute from "./controllers/nearby.js";
12 | import MailRouter from "./routes/Mailroute.js";
13 | 
14 | dotenv.config();
15 | const app = express();
16 | app.use(cors({ origin: "https://los-n-found-p783.onrender.com", credentials: true }));
17 | app.use(express.json());
18 | 
19 | // Routes
20 | app.use("/api/auth", UserRouter);
21 | // app.use("/api/protected", ProtectedRouter);
22 | app.use("/api/cloudinary", Cloudrouter);
23 | app.use("/api", Reportrouter); 
24 | app.use("/api", FoundRouter);
25 | app.use("/api", Matchrouter);
26 | app.use("/api",ProfileRouter);
27 | app.use("/api",NearbyRoute);
28 | app.use("/api",MailRouter)
29 | 
30 | const PORT = process.env.PORT || 5000;
31 | app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
32 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "client",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "vite build",
 9 |     "lint": "eslint .",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@emotion/react": "^11.14.0",
14 |     "@emotion/styled": "^11.14.0",
15 |     "@mui/icons-material": "^7.0.0",
16 |     "@mui/material": "^7.0.0",
17 |     "@tailwindcss/vite": "^4.0.14",
18 |     "axios": "^1.8.4",
19 |     "cloudinary": "^2.6.0",
20 |     "dotenv": "^16.4.7",
21 |     "firebase": "^11.5.0",
22 |     "leaflet": "^1.9.4",
23 |     "lucide-react": "^0.483.0",
24 |     "react": "^19.0.0",
25 |     "react-dom": "^19.0.0",
26 |     "react-hot-toast": "^2.5.2",
27 |     "react-icons": "^5.5.0",
28 |     "react-leaflet": "^5.0.0",
29 |     "react-router-dom": "^7.4.0",
30 |     "streamifier": "^0.1.1",
31 |     "tailwindcss": "^4.0.14"
32 |   },
33 |   "devDependencies": {
34 |     "@eslint/js": "^9.21.0",
35 |     "@types/react": "^19.0.10",
36 |     "@types/react-dom": "^19.0.4",
37 |     "@vitejs/plugin-react-swc": "^3.8.0",
38 |     "eslint": "^9.21.0",
39 |     "eslint-plugin-react-hooks": "^5.1.0",
40 |     "eslint-plugin-react-refresh": "^0.4.19",
41 |     "globals": "^15.15.0",
42 |     "vite": "^6.2.0"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/server/config/CloudinaryConfig.js:
--------------------------------------------------------------------------------
 1 | import { v2 as cloudinary } from "cloudinary";
 2 | import streamifier from "streamifier";
 3 | import dotenv from "dotenv"
 4 | dotenv.config();
 5 | // Configure Cloudinary
 6 | cloudinary.config({
 7 |   cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
 8 |   api_key: process.env.CLOUDINARY_API_KEY,
 9 |   api_secret: process.env.CLOUDINARY_API_SECRET,
10 | });
11 | 
12 | // Function to upload an image to Cloudinary
13 | export const uploadToCloudinary = (fileBuffer, folder = "lost_items") => {
14 |   return new Promise((resolve, reject) => {
15 |     const stream = cloudinary.uploader.upload_stream(
16 |       { folder }, // Optional: Organize images into folders
17 |       (error, result) => {
18 |         if (error) {
19 |           reject(error);
20 |         } else {
21 |           resolve(result);
22 |         }
23 |       }
24 |     );
25 | 
26 |     // Convert file buffer to a stream and upload
27 |     streamifier.createReadStream(fileBuffer).pipe(stream);
28 |   });
29 | };
30 | 
31 | // Function to delete an image from Cloudinary
32 | export const deleteFromCloudinary = (publicId) => {
33 |   return new Promise((resolve, reject) => {
34 |     cloudinary.uploader.destroy(publicId, (error, result) => {
35 |       if (error) {
36 |         reject(error);
37 |       } else {
38 |         resolve(result);
39 |       }
40 |     });
41 |   });
42 | };


--------------------------------------------------------------------------------
/server/routes/ReportRoute.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import { db, auth } from "../config/firebaseConfig.js"; 
 3 | 
 4 | const Reportrouter = express.Router();
 5 | 
 6 | 
 7 | Reportrouter.post("/report", async (req, res) => {
 8 |   const { category, description, location, imageUrl } = req.body;
 9 |   const token = req.headers.authorization?.split(" ")[1];
10 | 
11 |   if (!token) {
12 |     return res.status(401).json({ error: "Unauthorized" });
13 |   }
14 | 
15 |   if (!category || !description || !location || !location.lat || !location.lng) {
16 |     return res.status(400).json({ error: "Missing required fields" });
17 |   }
18 | 
19 |   try {
20 | 
21 |     const user = await auth.verifyIdToken(token);
22 |     const userId = user.uid;
23 | 
24 |     const reportData = {
25 |       userId,
26 |       category,
27 |       description,
28 |       location: {
29 |         lat: location.lat,
30 |         lng: location.lng,
31 |       },
32 |       imageUrl: imageUrl || null,
33 |       createdAt: new Date().toISOString(),
34 |     };
35 | 
36 |     const docRef = await db.collection("reportedItems").add(reportData);
37 |     res.status(201).json({ id: docRef.id, message: "Report submitted successfully" });
38 |   } catch (error) {
39 |     console.error("Error saving report:", error.message || error);
40 |     res.status(500).json({ error: "Failed to submit report" });
41 |   }
42 | });
43 | 
44 | export default Reportrouter;
45 | 


--------------------------------------------------------------------------------
/server/routes/FoundRoute.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import { db, auth } from "../config/firebaseConfig.js";
 3 | 
 4 | const FoundRouter = express.Router();
 5 | 
 6 | 
 7 | FoundRouter.post("/found", async (req, res) => {
 8 |   const { category, description, location, imageUrl } = req.body;
 9 |   const token = req.headers.authorization?.split(" ")[1];
10 | 
11 |   if (!token) {
12 |     return res.status(401).json({ error: "Unauthorized" });
13 |   }
14 | 
15 |   if (!category || !description || !location || !location.lat || !location.lng) {
16 |     return res.status(400).json({ error: "Missing required fields" });
17 |   }
18 | 
19 |   try {
20 |     
21 |     const user = await auth.verifyIdToken(token);
22 |     const userId = user.uid;
23 | 
24 |     const foundData = {
25 |       userId,
26 |       category,
27 |       description,
28 |       location: {
29 |         lat: location.lat,
30 |         lng: location.lng,
31 |       },
32 |       imageUrl: imageUrl || null, 
33 |       createdAt: new Date().toISOString(),
34 |     };
35 | 
36 |     const docRef = await db.collection("foundItems").add(foundData);
37 |     res.status(201).json({ id: docRef.id, message: "Found item reported successfully" });
38 |   } catch (error) {
39 |     console.error("Error saving found report:", error.message || error);
40 |     res.status(500).json({ error: "Failed to submit found item report" });
41 |   }
42 | });
43 | 
44 | export default FoundRouter;
45 | 


--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
 1 | # Setting Up a React + Vite Project
 2 | 
 3 | This guide provides the necessary steps to set up and run a React project using Vite.
 4 | 
 5 | ---
 6 | 
 7 | ## **1️⃣ Install Node.js and npm**
 8 | Ensure **Node.js** is installed, as it includes `npm` (Node Package Manager).
 9 | 
10 | ### **🔹 Windows/macOS/Linux:**
11 | - Download **Node.js LTS** from: [https://nodejs.org/](https://nodejs.org/)
12 | - Verify installation by running:  
13 |   ```sh
14 |   node -v   # Check Node.js version
15 |   npm -v    # Check npm version
16 |   ```
17 | 
18 | ---
19 | 
20 | ## **2️⃣ Clone the Repository**
21 | Clone the repository to get the project files locally.
22 | 
23 | ```sh
24 | git clone https://github.com/your-username/your-repo.git
25 | ```
26 | 
27 | Replace `your-username` and `your-repo` with the actual values.
28 | 
29 | ---
30 | 
31 | ## **3️⃣ Navigate to the Frontend Directory**
32 | If the React frontend is in a subfolder (`frontend`), move into it:
33 | 
34 | ```sh
35 | cd client
36 | ```
37 | 
38 | ---
39 | 
40 | ## **4️⃣ Install Dependencies**
41 | Run the following command to install all required dependencies:
42 | 
43 | ```sh
44 | npm install
45 | ```
46 | 
47 | This will install all packages listed in `package.json`.
48 | 
49 | ---
50 | 
51 | ## **5️⃣ Run the Development Server**
52 | To start the project in development mode with **Vite**, use:
53 | 
54 | ```sh
55 | npm run dev
56 | ```
57 | 
58 | This will launch the project on a local server. The terminal will display a local development URL (e.g., `http://localhost:5173/`).
59 | 
60 | ---
61 | 
62 | ## **7️⃣ Stopping the Development Server**
63 | To stop the server, press:
64 | 
65 | ```
66 | CTRL + C
67 | ```
68 | 
69 | ---
70 | 
71 | Now the project is ready for development! 🚀
72 | 
73 | 


--------------------------------------------------------------------------------
/server/routes/AuthRoutes.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import bcrypt from "bcryptjs";
 3 | import jwt from "jsonwebtoken";
 4 | import { db } from "../config/firebaseConfig.js";
 5 | import dotenv from "dotenv";
 6 | import cors from "cors";
 7 | import { verifyUser } from "../middleware/authmiddle.js";
 8 | dotenv.config();
 9 | 
10 | const UserRouter = express.Router();
11 | UserRouter.use(cors());
12 | 
13 | const generateToken = (email) => {
14 |   return jwt.sign({ email }, process.env.JWT_SECRET, { expiresIn: "7d" });
15 | };
16 | 
17 | UserRouter.post("/signup", verifyUser, async (req, res) => {
18 |   try {
19 |     const { uid, username, email } = req.user;
20 |     const newUser = { uid, username, email };
21 |     console.log("User signed up:", newUser);
22 | 
23 |     res.status(201).json({ message: "User registered successfully", user: newUser });
24 |   } catch (error) {
25 |     res.status(500).json({ error: "Signup failed", details: error.message });
26 |   }
27 | });
28 | 
29 | UserRouter.post("/login", async (req, res) => {
30 |   try {
31 |     const { email, password } = req.body;
32 |     const userDoc = await db.collection("users").doc(email).get();
33 | 
34 |     if (!userDoc.exists) return res.status(404).json({ error: "User not found" });
35 | 
36 |     const userData = userDoc.data();
37 |     const isValidPassword = await bcrypt.compare(password, userData.password);
38 | 
39 |     if (!isValidPassword) return res.status(401).json({ error: "Invalid credentials" });
40 | 
41 | 
42 |     const token = generateToken(email);
43 | 
44 |     return res.status(200).json({ message: "Login successful", token });
45 |   } catch (error) {
46 |     return res.status(500).json({ error: error.message });
47 |   }
48 | });
49 | 
50 | export default UserRouter;


--------------------------------------------------------------------------------
/client/src/App.jsx:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 2 | import "./App.css";
 3 | import { ThemeProvider, useTheme } from  "./components/theme";
 4 | import LoginPage from "./pages/Login";
 5 | import LandingPage from "./pages/welcome";
 6 | import SignUp from "./pages/SignUp";
 7 | import UpdateProfile from "./pages/UpdateProfile";
 8 | import ProfilePage from "./pages/Profile";
 9 | import HomePage from "./pages/Home";
10 | import ReportPage from "./pages/Report";
11 | import FoundPage from "./pages/Found";
12 | import RecentUpdates from "./pages/Recent";
13 | import MapComponent from "./pages/Nearby";
14 | import ForumPage from "./pages/Forum";
15 | import { Toaster } from "react-hot-toast";
16 | import AdminPage from './pages/Adminpage.jsx';
17 | 
18 | function App() {
19 | 
20 |   return (
21 |     <ThemeProvider>
22 |     <Router>
23 |      <Toaster position="top-center" reverseOrder={false} />
24 |       <Routes>
25 |         <Route path="/" element={<LandingPage />} />
26 |         <Route path="/signup" element={<SignUp />} />
27 |         <Route path="/login" element={<LoginPage />} />
28 |         <Route path="/admin" element={<AdminPage />} />
29 |         <Route path="/Home" element={<HomePage />} />
30 |         <Route path="/profile/:userId" element={<ProfilePage />} />
31 |         <Route path="/update" element={<UpdateProfile />} />
32 |         <Route path="/report" element={<ReportPage />} />
33 |         <Route path="/found" element={<FoundPage />} />
34 |         <Route path="/forum" element={<ForumPage />} />
35 |         <Route path="/recent" element={<RecentUpdates />} />
36 |         <Route path="/map" element={<MapComponent />} />
37 |       </Routes>
38 |      
39 |     </Router>
40 |     </ThemeProvider>
41 |   );
42 | }
43 | 
44 | 
45 | export default App;
46 | 


--------------------------------------------------------------------------------
/client/src/components/MapComponent.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from "react-leaflet";
 3 | import "leaflet/dist/leaflet.css";
 4 | import L from "leaflet";
 5 | import icon from "leaflet/dist/images/marker-icon.png";
 6 | import iconShadow from "leaflet/dist/images/marker-shadow.png";
 7 | 
 8 | const DefaultIcon = L.icon({
 9 |   iconUrl: icon,
10 |   shadowUrl: iconShadow,
11 |   iconSize: [25, 41],
12 |   iconAnchor: [12, 41],
13 |   popupAnchor: [1, -34],
14 |   shadowSize: [41, 41],
15 | });
16 | 
17 | L.Marker.prototype.options.icon = DefaultIcon;
18 | 
19 | export default function MapComponent({ setLocation }) {
20 |   const [position, setPosition] = useState(null);
21 | 
22 |   function LocationMarker() {
23 |     useMapEvents({
24 |       click(e) {
25 |         setPosition(e.latlng);
26 |         setLocation(e.latlng);
27 |       },
28 |     });
29 | 
30 |     return position ? (
31 |       <Marker position={position} icon={DefaultIcon}>
32 |         <Popup>Selected Location: {position.lat.toFixed(5)}, {position.lng.toFixed(5)}</Popup>
33 |       </Marker>
34 |     ) : null;
35 |   }
36 | 
37 |   useEffect(() => {
38 |     navigator.geolocation.getCurrentPosition(
39 |       (position) => {
40 |         setPosition({ lat: position.coords.latitude, lng: position.coords.longitude });
41 |         setLocation({ lat: position.coords.latitude, lng: position.coords.longitude });
42 |       },
43 |       () => console.log("Location access denied")
44 |     );
45 |   }, []);
46 | 
47 |   return (
48 |     <MapContainer
49 |       center={position || [20, 77]}
50 |       zoom={position ? 13 : 5}
51 |       style={{ height: "300px", width: "100%" }}
52 |       className="border border-gray-300 rounded"
53 |     >
54 |       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
55 |       <LocationMarker />
56 |     </MapContainer>
57 |   );
58 | }


--------------------------------------------------------------------------------
/server/routes/Mailroute.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import nodemailer from "nodemailer";
 3 | import dotenv from "dotenv";
 4 | import admin from "firebase-admin";
 5 | 
 6 | dotenv.config();
 7 | const MailRouter = express.Router();
 8 | 
 9 | // Nodemailer Configuration
10 | const transporter = nodemailer.createTransport({
11 |   service: "gmail",
12 |   auth: {
13 |     user: process.env.EMAIL_USER, 
14 |     pass: process.env.EMAIL_PASS,
15 |   },
16 | });
17 | 
18 | 
19 | MailRouter.post("/send-email", async (req, res) => {
20 |   const { ownerUid, senderEmail, itemDetails, title } = req.body;
21 | 
22 |   try {
23 |     // Fetch the owner's email from Firebase Auth
24 |     const ownerRecord = await admin.auth().getUser(ownerUid);
25 |     const ownerEmail = ownerRecord.email;
26 | 
27 |     
28 |     const mailOptions = {
29 |       from: senderEmail, 
30 |       to: ownerEmail, 
31 |       subject: `Lost & Found: Inquiry about Reported Item`,
32 |       text: `Dear User,
33 | 
34 | 👋 We hope this message finds you well.
35 | 
36 | We are reaching out through our Lost & Found service regarding an item that may match something you’ve reported as missing.
37 | 
38 | 📦 Item Details:
39 | ${itemDetails}
40 | 
41 | If this item appears to be yours, we kindly request you to contact the person who found it in order to verify ownership and arrange for its return.
42 | 
43 | 📧 Please reply directly to the following email address:
44 | ${senderEmail}
45 | 
46 | To help confirm ownership, please include any identifying details you may have (e.g., serial number, stickers, scratches, or unique features).
47 | 
48 | 🙏 We appreciate your cooperation and hope you’re reunited with your lost item soon.
49 | 
50 | Warm regards,  
51 | Lost & Found Support Team  
52 | 🔁 ReturnIt
53 | `,
54 |     };
55 | 
56 |     // Send the email
57 |     await transporter.sendMail(mailOptions);
58 |     res.json({ success: true, message: "Email sent successfully!" });
59 |   } catch (error) {
60 |     console.error("Error sending email:", error);
61 |     res.status(500).json({ error: "Failed to send email" });
62 |   }
63 | });
64 | 
65 | export default MailRouter;


--------------------------------------------------------------------------------
/server/controllers/nearby.js:
--------------------------------------------------------------------------------
 1 | import express from "express";
 2 | import admin from "firebase-admin";
 3 | 
 4 | const NearbyRoute = express.Router();
 5 | 
 6 | 
 7 | function haversineDistance(lat1, lon1, lat2, lon2) {
 8 |   const toRadians = (degrees) => degrees * (Math.PI / 180);
 9 |   const R = 6371; 
10 |   const dLat = toRadians(lat2 - lat1);
11 |   const dLon = toRadians(lon2 - lon1);
12 |   const a =
13 |     Math.sin(dLat / 2) * Math.sin(dLat / 2) +
14 |     Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
15 |   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
16 |   return R * c;
17 | }
18 | 
19 | 
20 | async function getAllItems() {
21 |   const reportedItemsRef = admin.firestore().collection("reportedItems");
22 |   const foundItemsRef = admin.firestore().collection("foundItems");
23 | 
24 |   const reportedItemsSnapshot = await reportedItemsRef.get();
25 |   const foundItemsSnapshot = await foundItemsRef.get();
26 | 
27 |   const reportedItems = reportedItemsSnapshot.docs.map((doc) => ({
28 |     id: doc.id,
29 |     ...doc.data(),
30 |     type: "reported", 
31 |   }));
32 | 
33 |   const foundItems = foundItemsSnapshot.docs.map((doc) => ({
34 |     id: doc.id,
35 |     ...doc.data(),
36 |     type: "found", 
37 |   }));
38 | 
39 |   return [...reportedItems, ...foundItems]; // Combine both arrays
40 | }
41 | 
42 | // Filter items based on selected location
43 | NearbyRoute.get("/items", async (req, res) => {
44 |   const { latitude, longitude, radius = 20 } = req.query;
45 |   if (!latitude || !longitude) {
46 |     return res.status(400).json({ error: "Latitude and longitude are required" });
47 |   }
48 | 
49 |   try {
50 |     const allItems = await getAllItems();
51 |     const center = [parseFloat(latitude), parseFloat(longitude)];
52 |     const radiusInKm = parseFloat(radius);
53 | 
54 |     // Filter items within the specified radius
55 |     const filteredItems = allItems.filter((item) => {
56 |       if (!item.location || !item.location.lat || !item.location.lng) return false;
57 | 
58 |       const distance = haversineDistance(
59 |         center[0],
60 |         center[1],
61 |         item.location.lat,
62 |         item.location.lng
63 |       );
64 | 
65 |       return distance <= radiusInKm;
66 |     });
67 | 
68 |     
69 |     res.json({ items: filteredItems });
70 |   } catch (error) {
71 |     res.status(500).json({ error: "Failed to fetch items" });
72 |   }
73 | });
74 | 
75 | export default NearbyRoute;


--------------------------------------------------------------------------------
/server/controllers/UserControl.js:
--------------------------------------------------------------------------------
 1 | import admin from "firebase-admin";
 2 | 
 3 | const db = admin.firestore();
 4 | const auth = admin.auth();
 5 | 
 6 | export const getUserProfile = async (req, res) => {
 7 |   const { userId } = req.params;
 8 | 
 9 |   try {
10 |     const userDoc = await db.collection("users").doc(userId).get();
11 |     const userData = userDoc.exists ? userDoc.data() : {};
12 | 
13 |     const authUser = await auth.getUser(userId);
14 |     const reportedItemsSnap = await db.collection("reportedItems").where("userId", "==", userId).get();
15 |     const foundItemsSnap = await db.collection("foundItems").where("userId", "==", userId).get();
16 | 
17 |     const userProfile = {
18 |       name: userData.name || "",
19 |       email: authUser.email || "",
20 |       phone: userData.phone || "",
21 |       profileImage: userData.profileImage || "",
22 |       reportsCount: reportedItemsSnap.size,
23 |       foundCount: foundItemsSnap.size,
24 |     };
25 | 
26 |     res.json(userProfile);
27 |   } catch (error) {
28 |     console.error("Error fetching user profile:", error);
29 |     res.status(500).json({ error: "Error fetching user profile" });
30 |   }
31 | };
32 | 
33 | export const updateUserProfile = async (req, res) => {
34 |   const { userId } = req.params;
35 |   const { name, phone, profileImage, email } = req.body;
36 | 
37 |   try {
38 | 
39 |     const userRef = db.collection("users").doc(userId);
40 |     await userRef.set({
41 |       name,
42 |       phone,
43 |       profileImage,
44 |       createdAt: admin.firestore.FieldValue.serverTimestamp(),
45 |       updatedAt: admin.firestore.FieldValue.serverTimestamp()
46 |     }, { merge: true });
47 | 
48 |     if (email) {
49 |       const authUser = await auth.getUser(userId);
50 |       if (authUser.email !== email) {
51 |         await auth.updateUser(userId, { email });
52 |       }
53 |     }
54 | 
55 |     res.json({ 
56 |       success: true, 
57 |       message: "Profile updated successfully",
58 |       data: {
59 |         name,
60 |         phone,
61 |         profileImage,
62 |         email: email || undefined
63 |       }
64 |     });
65 |   } catch (error) {
66 |     console.error("Error updating profile:", error);
67 |     
68 |     let errorMessage = "Error updating profile";
69 |     if (error.code === 'auth/email-already-in-use') {
70 |       errorMessage = "Email is already in use by another account";
71 |     } else if (error.code === 'auth/invalid-email') {
72 |       errorMessage = "Invalid email address";
73 |     }
74 | 
75 |     res.status(500).json({ 
76 |       error: errorMessage,
77 |       details: error.message 
78 |     });
79 |   }
80 | };


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🔍 Lost & Found Platform  
 2 | 
 3 | A **smart AI-powered lost and found platform** that helps users report, search, and match lost and found items based on **location and description**.
 4 | **Built as part of the IPR Project for Semester 2** – This project showcases the integration of AI and modern web technologies to solve real-world problems.
 5 | ## 🚀 Features  
 6 | 
 7 | ✅ **Report Lost & Found Items** – Users can report lost or found items with details like category, description, location, and optional images.  
 8 | ✅ **AI-Powered Matchmaking** – Uses a Hugging Face model to intelligently match lost and found items based on descriptions and locations.  
 9 | ✅ **Location-Based Search** – Users can search for lost or found items within their area.  
10 | ✅ **Email Contact System** – Users can click on a lost or found report and directly send an email to the reporter for inquiries.  
11 | ✅ **User Authentication** – Firebase-based authentication with **email and Google sign-up options**.  
12 | ✅ **Modern & Responsive UI** – Built with **Tailwind CSS** for a seamless mobile-friendly experience.  
13 | 
14 | ## 🛠️ Tech Stack  
15 | 
16 | - **Frontend:** React.js, Tailwind CSS  
17 | - **Backend:** Express.js, Node.js  
18 | - **AI Model:** Hugging Face  
19 | - **Database & Authentication:** Firebase (Firestore & Auth)  
20 | 
21 | ## 🏗️ Setup Instructions  
22 | 
23 | ### 1️⃣ Clone the Repository  
24 | ```bash
25 | git clone https://github.com/yourusername/lost-and-found.git
26 | cd lost-and-found
27 | ```
28 | 
29 | ### 2️⃣ Install Dependencies  
30 | ```bash
31 | npm install
32 | ```
33 | 
34 | ### 3️⃣ Set Up Firebase  
35 | - Create a Firebase project at [Firebase Console](https://console.firebase.google.com/)  
36 | - Enable **Firestore Database** & **Authentication**  
37 | - Get Firebase config keys and update `firebase.js`  
38 | 
39 | ### 4️⃣ Start the Backend Server  
40 | ```bash
41 | cd server
42 | node server.js
43 | ```
44 | 
45 | ### 5️⃣ Run the Frontend  
46 | ```bash
47 | npm run dev
48 | ```
49 | 
50 | ## 🎯 Usage  
51 | 
52 | ### 1️⃣ Report Lost or Found Items  
53 | - Navigate to the **"Report Item"** or **"Report a Found Item"** page.  
54 | - Enter details like **category, description, and location**.  
55 | - Optionally upload an **image**.  
56 | 
57 | ### 2️⃣ Search & AI-Powered Matchmaking  
58 | - Use the **location-based search** to find items within your area.  
59 | - AI matches lost and found items based on **description & location**.  
60 | 
61 | ### 3️⃣ Contact Users  
62 | - Click on an item report to view details.  
63 | - Use the **email button** to contact the owner directly.  
64 | 
65 | ---
66 | 
67 | ## 📌 Future Enhancements  
68 | 
69 | - **Push notifications** for matching items  
70 | - **Image-based AI matching** for better accuracy  
71 | - **Multi-language support** for wider accessibility  
72 | 
73 | ---
74 | 
75 | Contributions & feedback are welcome! 🚀
76 | 


--------------------------------------------------------------------------------
/server/controllers/matchControl.js:
--------------------------------------------------------------------------------
 1 | import admin from "firebase-admin";
 2 | import axios from "axios";
 3 | import dotenv from "dotenv";
 4 | 
 5 | dotenv.config();
 6 | const db = admin.firestore();
 7 | 
 8 | // Hugging Face API
 9 | const HF_API_URL = "https://api-inference.huggingface.co/models/sentence-transformers/all-MiniLM-L6-v2";
10 | const HF_API_KEY = process.env.HF_API_KEY;
11 | 
12 | // Fetch lost items by logged-in user
13 | async function getUserLostItems(userId) {
14 |   const lostRef = db.collection("reportedItems").where("userId", "==", userId);
15 |   const lostDocs = await lostRef.get();
16 |   return lostDocs.docs.map(doc => ({ id: doc.id, ...doc.data() }));
17 | }
18 | 
19 | // Fetch all found items
20 | async function getAllFoundItems() {
21 |   const foundRef = db.collection("foundItems");
22 |   const foundDocs = await foundRef.get();
23 |   return foundDocs.docs.map(doc => ({ id: doc.id, ...doc.data() }));
24 | }
25 | 
26 | // Get similarity score using Hugging Face API
27 | async function getSimilarity(sentence1, sentence2) {
28 |   try {
29 |     const response = await axios.post(
30 |       HF_API_URL,
31 |       { inputs: { source_sentence: sentence1, sentences: [sentence2] } },
32 |       { headers: { Authorization: `Bearer ${HF_API_KEY}`, "Content-Type": "application/json" } }
33 |     );
34 | 
35 |     return Array.isArray(response.data) ? response.data[0] : null;
36 |   } catch (error) {
37 |     return null;
38 |   }
39 | }
40 | 
41 | // Haversine formula to calculate distance between two coordinates
42 | function haversineDistance(lat1, lon1, lat2, lon2) {
43 |   const toRadians = (degrees) => degrees * (Math.PI / 180);
44 |   const R = 6371; // Earth's radius in km
45 |   const dLat = toRadians(lat2 - lat1);
46 |   const dLon = toRadians(lon2 - lon1);
47 |   const a =
48 |     Math.sin(dLat / 2) * Math.sin(dLat / 2) +
49 |     Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
50 |   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
51 |   return R * c; // Distance in km
52 | }
53 | 
54 | // Match user's lost items with all found items
55 | async function matchUserItems(userId) {
56 |   const lostItems = await getUserLostItems(userId);
57 |   const foundItems = await getAllFoundItems();
58 | 
59 |   let matchedResults = [];
60 | 
61 |   for (const lost of lostItems) {
62 |     let matches = [];
63 | 
64 |     for (const found of foundItems) {
65 |       if (!lost.description || !found.description || !lost.location || !found.location) continue;
66 | 
67 |       // Calculate description similarity
68 |       const similarity = await getSimilarity(lost.description, found.description);
69 |       if (similarity === null || similarity < 0.5) continue;
70 |       // Calculate distance between lost and found items
71 |       const distance = haversineDistance(
72 |         lost.location.lat,
73 |         lost.location.lng,
74 |         found.location.lat,
75 |         found.location.lng
76 |       );
77 | 
78 |       // Skip if distance is greater than 1km
79 |       if (distance > 1) continue;
80 | 
81 |       // Normalize distance to a score between 0 and 1
82 |       const normalizedDistance = distance / 1; // Since max distance is 1km
83 | 
84 |       // Calculate final score (weighted average of similarity and proximity)
85 |       const finalScore = (0.7 * similarity) + (0.3 * (1 - normalizedDistance));
86 | 
87 |       matches.push({ foundItem: found, similarity: finalScore });
88 |     }
89 | 
90 |     // Sort matches by final score and take top 3
91 |     matches.sort((a, b) => b.similarity - a.similarity);
92 |     matchedResults.push({ lostItem: lost, topMatches: matches.slice(0, 3) });
93 |   }
94 | 
95 |   return matchedResults;
96 | }
97 | 
98 | export { matchUserItems };


--------------------------------------------------------------------------------
/client/src/pages/Login.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { useNavigate } from "react-router-dom";
  3 | import { FaGoogle } from "react-icons/fa";
  4 | import { auth, googleProvider } from "../firebaseConfig"; 
  5 | import { signInWithEmailAndPassword, signInWithPopup, onAuthStateChanged } from "firebase/auth";
  6 | import Visibility from '@mui/icons-material/Visibility';
  7 | import VisibilityOff from '@mui/icons-material/VisibilityOff';
  8 | import { toast, Toaster } from 'react-hot-toast';
  9 | 
 10 | export default function LoginPage() {
 11 |   const [email, setEmail] = useState("");
 12 |   const [password, setPassword] = useState("");
 13 |   const [passwordVisible, setPasswordVisible] = useState(false);
 14 |   const [isDarkMode, setIsDarkMode] = useState(false);
 15 |   const navigate = useNavigate();
 16 | 
 17 |   useEffect(() => {
 18 |     const storedTheme = localStorage.getItem("darkMode");
 19 |     setIsDarkMode(storedTheme === "true");
 20 | 
 21 |     const unsubscribe = onAuthStateChanged(auth, (user) => {
 22 |       if (user) {
 23 |         
 24 |         navigate(user.email.toLowerCase() === "admin@returnit.com" ? "/admin" : "/Home");
 25 |       }
 26 |     });
 27 | 
 28 |     return () => unsubscribe();
 29 |   }, [navigate]);
 30 | 
 31 |   const handleLogin = async (e) => {
 32 |     e.preventDefault();
 33 | 
 34 |     try {
 35 |       const userCredential = await signInWithEmailAndPassword(auth, email, password);
 36 |       const token = await userCredential.user.getIdToken();
 37 |       localStorage.setItem("token", token);
 38 |       toast.success('Login successful!');
 39 |       navigate(userCredential.user.email.toLowerCase() === "admin@returnit.com" ? "/admin" : "/Home");
 40 |     } catch (error) {
 41 |       toast.error("Invalid email or password");
 42 |     }
 43 |   };
 44 | 
 45 |   const handleGoogleLogin = async () => {
 46 |     try {
 47 |       const userCredential = await signInWithPopup(auth, googleProvider);
 48 |       const token = await userCredential.user.getIdToken();
 49 |       localStorage.setItem("token", token);
 50 |       toast.success('Logged in with Google!');
 51 |       navigate(userCredential.user.email.toLowerCase() === "admin@returnit.com" ? "/admin" : "/Home");
 52 |     } catch (error) {
 53 |       toast.error("Failed to login with Google");
 54 |     }
 55 |   };
 56 |   return (
 57 |     <div className={`flex items-center justify-center min-h-screen ${isDarkMode ? "bg-gray-900" : "bg-gradient-to-b from-blue-50 to-white"} p-4 transition-colors duration-500`}>
 58 |       <Toaster position="top-center" />
 59 |       <div className={`flex w-full max-w-3xl shadow-lg rounded-lg overflow-hidden flex-col md:flex-row ${
 60 |         isDarkMode ? "bg-gray-800" : "bg-white"
 61 |       }`}>
 62 |         <div className={`hidden md:flex w-1/2 ${
 63 |           isDarkMode ? "bg-gradient-to-r from-gray-700 to-gray-800" : "bg-gradient-to-r from-blue-500 to-blue-600"
 64 |         } text-white flex-col justify-center items-center p-6 text-center`}>
 65 |           <h2 className="text-xl font-semibold">"Lost things have a way of finding their way back to those who cherish them." ✨🔍</h2>
 66 |           <p className="mt-4">- Anonymous</p>
 67 |         </div>
 68 |         <div className="w-full md:w-1/2 p-8">
 69 |           <h3 className={`text-2xl font-semibold mb-6 ${
 70 |             isDarkMode ? "text-blue-400" : "text-blue-600"
 71 |           }`}>Welcome Back</h3>
 72 | 
 73 |           <form onSubmit={handleLogin}>
 74 |             <div className="mb-4">
 75 |               <label className={`block text-sm mb-1 ${
 76 |                 isDarkMode ? "text-gray-300" : "text-gray-600"
 77 |               }`}>Email address</label>
 78 |               <input
 79 |                 type="email"
 80 |                 value={email}
 81 |                 onChange={(e) => setEmail(e.target.value)}
 82 |                 className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
 83 |                   isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "border-gray-300"
 84 |                 }`}
 85 |                 placeholder="Enter your email"
 86 |                 required
 87 |               />
 88 |             </div>
 89 |             <div className="mb-4 relative">
 90 |               <label className={`block text-sm mb-1 ${
 91 |                 isDarkMode ? "text-gray-300" : "text-gray-600"
 92 |               }`}>Password</label>
 93 |               <input
 94 |                 type={passwordVisible ? "text" : "password"}
 95 |                 value={password}
 96 |                 onChange={(e) => setPassword(e.target.value)}
 97 |                 className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
 98 |                   isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "border-gray-300"
 99 |                 }`}
100 |                 placeholder="Enter your password"
101 |                 required
102 |               />
103 |               <button
104 |                 type="button"
105 |                 className={`absolute right-3 top-8 ${
106 |                   isDarkMode ? "text-gray-400" : "text-gray-500"
107 |                 }`}
108 |                 onClick={() => setPasswordVisible(!passwordVisible)}
109 |               >
110 |                 {passwordVisible ? <VisibilityOff /> : <Visibility />}
111 |               </button>
112 |             </div>
113 | 
114 |             <button 
115 |               type="submit" 
116 |               className={`w-full py-2 rounded-lg mt-2 hover:bg-blue-700 transition font-medium ${
117 |                 isDarkMode ? "bg-blue-700 text-white" : "bg-blue-600 text-white"
118 |               }`}
119 |             >
120 |               Login
121 |             </button>
122 |           </form>
123 | 
124 |           <div className="flex items-center my-4">
125 |             <div className={`flex-grow border-t ${
126 |               isDarkMode ? "border-gray-600" : "border-gray-300"
127 |             }`}></div>
128 |             <span className={`mx-4 ${
129 |               isDarkMode ? "text-gray-400" : "text-gray-500"
130 |             }`}>or</span>
131 |             <div className={`flex-grow border-t ${
132 |               isDarkMode ? "border-gray-600" : "border-gray-300"
133 |             }`}></div>
134 |           </div>
135 | 
136 |           <button
137 |             onClick={handleGoogleLogin}
138 |             className={`w-full flex items-center justify-center py-2 rounded-lg transition font-medium ${
139 |               isDarkMode 
140 |                 ? "border-gray-600 bg-gray-700 hover:bg-gray-600 text-white" 
141 |                 : "border-gray-300 hover:bg-gray-50"
142 |             } border`}
143 |           >
144 |             <FaGoogle className="text-red-500 mr-2" /> Continue with Google
145 |           </button>
146 | 
147 |           <p className={`text-center mt-6 ${
148 |             isDarkMode ? "text-gray-400" : "text-gray-600"
149 |           }`}>
150 |             Don't have an account?{' '}
151 |             <a href="/signup" className={`${
152 |               isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-800"
153 |             } font-medium`}>
154 |               Sign up
155 |             </a>
156 |           </p>
157 |         </div>
158 |       </div>
159 |     </div>
160 |   );
161 | }


--------------------------------------------------------------------------------
/client/src/assets/badges.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { HelpCircle } from "lucide-react";
  3 | 
  4 | const badgeUrls = {
  5 |   contributor: "https://img.icons8.com/color/48/000000/starburst-shape.png",
  6 |   helpfulFinder: "https://img.icons8.com/fluency/48/000000/medal.png",
  7 |   helpfulFinderNextLevel: "https://img.icons8.com/plasticine/48/000000/trophy.png",
  8 |   activeUser: "https://img.icons8.com/plasticine/48/000000/fire-badge.png",
  9 | };
 10 | 
 11 | const badgeCriteria = {
 12 |   contributor: { description: "Report at least one lost or found item." },
 13 |   helpfulFinder: { description: "Successfully help reunite more than 5 found items.", threshold: 5 },
 14 |   helpfulFinderNextLevel: { description: "Successfully help reunite more than 15 found items.", threshold: 15 },
 15 |   activeUser: { description: "Maintain consistent activity on the platform." },
 16 | };
 17 | 
 18 | const fakeBadgeRules = [
 19 |   badgeCriteria.contributor.description + " Earn the 'Contributor' badge upon your first report.",
 20 |   badgeCriteria.helpfulFinder.description + " You'll get the 'Helpful Finder' reward after your 6th successful reunion.",
 21 |   badgeCriteria.helpfulFinderNextLevel.description + " Reach 16 successful reunions to unlock the 'Dedicated Helper' badge.",
 22 |   badgeCriteria.activeUser.description + " Log in regularly to achieve this badge.",
 23 | ];
 24 | 
 25 | const ProgressBar = ({ progress }) => (
 26 |   <div className="bg-gray-300 rounded-full h-1 relative overflow-hidden">
 27 |     <div
 28 |       className="bg-green-500 rounded-full h-1 absolute left-0 top-0"
 29 |       style={{ width: `${progress}%` }}
 30 |     ></div>
 31 |   </div>
 32 | );
 33 | 
 34 | export default function YourBadgesSection({ isDarkMode, reportedItems, foundItems }) {
 35 |   const [showRules, setShowRules] = useState(false);
 36 |   const [earnedBadges, setEarnedBadges] = useState([]);
 37 |   const [progressToNext, setProgressToNext] = useState({});
 38 | 
 39 |   useEffect(() => {
 40 |     const badges = [];
 41 |     const progress = {};
 42 | 
 43 |     if (reportedItems && reportedItems.length > 0) {
 44 |       badges.push("contributor");
 45 |     }
 46 | 
 47 |     if (foundItems) {
 48 |       if (foundItems.length > badgeCriteria.helpfulFinder.threshold) {
 49 |         badges.push("helpfulFinder");
 50 |         if (foundItems.length < badgeCriteria.helpfulFinderNextLevel.threshold) {
 51 |           const remaining = badgeCriteria.helpfulFinderNextLevel.threshold - foundItems.length;
 52 |           progress["helpfulFinderNextLevel"] = {
 53 |             needed: remaining,
 54 |             current: foundItems.length,
 55 |             threshold: badgeCriteria.helpfulFinderNextLevel.threshold,
 56 |             description: ` ${remaining} more found result${remaining > 1 ? 's' : ''} till the next level!`,
 57 |           };
 58 |         }
 59 |       } else {
 60 |         const remaining = badgeCriteria.helpfulFinder.threshold - foundItems.length;
 61 |         if (remaining > 0) {
 62 |           progress["helpfulFinder"] = {
 63 |             needed: remaining,
 64 |             current: foundItems.length,
 65 |             threshold: badgeCriteria.helpfulFinder.threshold,
 66 |             description: ` ${remaining} more found result${remaining > 1 ? 's' : ''} till the 'Helpful Finder' badge!`,
 67 |           };
 68 |         }
 69 |       }
 70 |     }
 71 | 
 72 |     setEarnedBadges(badges);
 73 |     setProgressToNext(progress);
 74 |   }, [reportedItems, foundItems]);
 75 | 
 76 |   const handleRulesClick = () => {
 77 |     setShowRules(!showRules);
 78 |   };
 79 | 
 80 |   return (
 81 |     <section className="mb-12 relative">
 82 |       <div className="mb-6 flex items-center justify-end">
 83 |   <button
 84 |     onClick={handleRulesClick}
 85 |     className="focus:outline-none"
 86 |     aria-label="View badge rules"
 87 |   >
 88 |     <HelpCircle size={20} className={`${isDarkMode ? "text-gray-400" : "text-gray-600"} cursor-pointer`} />
 89 |   </button>
 90 | </div>
 91 | 
 92 |       {showRules && (
 93 |         <div className={`absolute top-0 right-0 mt-8 p-4 z-10 rounded-md shadow-md text-sm w-64 ${isDarkMode ? "bg-gray-800 text-gray-300" : "bg-white text-gray-600"}`}>
 94 |           <h3 className="font-bold mb-2">How to Earn Rewards</h3>
 95 |           <ul className="list-disc pl-4">
 96 |             {fakeBadgeRules.map((rule, index) => (
 97 |               <li key={index} className="mb-1">{rule}</li>
 98 |             ))}
 99 |           </ul>
100 |         </div>
101 |       )}
102 | 
103 |       <div className={`p-8 rounded-xl shadow-sm ${isDarkMode ? "bg-gray-800 text-gray-300" : "bg-white text-gray-600"}`}>
104 |         {earnedBadges.length > 0 ? (
105 |           <div>
106 |             <div className="flex justify-center space-x-4 mb-4">
107 |               {earnedBadges.map((badge) => (
108 |                 <div key={badge} className="flex flex-col items-center">
109 |                   {badgeUrls[badge] && <img src={badgeUrls[badge]} alt={badge} className="w-20 h-20 mb-1" />}
110 |                   <span className="text-sm">{badge.charAt(0).toUpperCase() + badge.slice(1)}</span>
111 |                 </div>
112 |               ))}
113 |             </div>
114 |             {Object.keys(progressToNext).length > 0 && (
115 |               <div className="mt-4">
116 |                 <h3 className="font-semibold mb-2">Progress to Next Reward:</h3>
117 |                 <div className="mb-3">
118 |                   {Object.entries(progressToNext).map(([badgeKey, progressInfo]) => (
119 |                     <div key={badgeKey}>
120 |                       <div className="flex items-center justify-between text-sm mb-1">
121 |                         <span>{badgeCriteria[badgeKey]?.description}</span>
122 |                         <span>{progressInfo.current}/{progressInfo.threshold}</span>
123 |                       </div>
124 |                       <ProgressBar
125 |                         progress={
126 |                           progressInfo.threshold > 0
127 |                             ? (progressInfo.current / progressInfo.threshold) * 100
128 |                             : 0
129 |                         }
130 |                       />
131 |                       <p className="text-xs mt-1 text-gray-500">{progressInfo.description}</p>
132 |                     </div>
133 |                   ))}
134 |                 </div>
135 |               </div>
136 |             )}
137 |           </div>
138 |         ) : (
139 |           <div className="text-center">
140 |             <p className="mb-2">No badges earned yet. Start participating to earn rewards!</p>
141 |             {progressToNext["helpfulFinder"] && (
142 |               <div className="mt-4 text-left"> 
143 |                 <h3 className="font-semibold mb-2">Your Progress:</h3>
144 |                 <div className="flex items-center justify-between text-sm mb-1">
145 |                   <span>{badgeCriteria["helpfulFinder"]?.description}</span>
146 |                   <span>{progressToNext["helpfulFinder"].current}/{badgeCriteria["helpfulFinder"].threshold}</span>
147 |                 </div>
148 |                 <ProgressBar
149 |                   progress={
150 |                     badgeCriteria["helpfulFinder"].threshold > 0
151 |                       ? (progressToNext["helpfulFinder"].current / badgeCriteria["helpfulFinder"].threshold) * 100
152 |                       : 0
153 |                   }
154 |                 />
155 |                 <p className="text-xs mt-1 text-gray-500">{progressToNext["helpfulFinder"].description}</p>
156 |               </div>
157 |             )}
158 |           </div>
159 |         )}
160 |       </div>
161 |     </section>
162 |   );
163 | }


--------------------------------------------------------------------------------
/client/src/pages/welcome.jsx:
--------------------------------------------------------------------------------
  1 | import { useNavigate } from "react-router-dom";
  2 | import EmailIcon from "@mui/icons-material/Email";
  3 | import SupportAgentIcon from "@mui/icons-material/SupportAgent";
  4 | import GavelIcon from "@mui/icons-material/Gavel";
  5 | import PrivacyTipIcon from "@mui/icons-material/PrivacyTip";
  6 | import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
  7 | import { useState, useEffect } from "react";
  8 | import LoadingScreen from "../components/loading";
  9 | 
 10 | export default function LandingPage() {
 11 |   const navigate = useNavigate();
 12 |   const [showLoading, setShowLoading] = useState(false);
 13 |   const [redirectPath, setRedirectPath] = useState(null);
 14 |   const [isDarkMode, setIsDarkMode] = useState(() => {
 15 |     const storedTheme = localStorage.getItem("darkMode");
 16 |     return storedTheme ? storedTheme === "true" : false;
 17 |   });
 18 |   const handleRedirect = (path) => {
 19 |     setRedirectPath(path);
 20 |     setShowLoading(true);
 21 | 
 22 |     setTimeout(() => {
 23 |       navigate(path);
 24 |     }, 2000);
 25 |   };
 26 | 
 27 |   if (showLoading) return <LoadingScreen isDarkMode={isDarkMode} />;
 28 | 
 29 | 
 30 |   const darkClass = isDarkMode ? "dark" : "";
 31 |   const textColorClass = isDarkMode ? "text-gray-300" : "text-gray-800";
 32 |   const bgColorClass = isDarkMode ? "bg-gray-900" : "bg-gradient-to-b from-blue-50 to-white";
 33 |   const navBgClass = isDarkMode ? "bg-gray-800 shadow-md" : "bg-white shadow-sm";
 34 |   const headerBgClass = isDarkMode ? "bg-gradient-to-r from-blue-700 to-blue-800 text-white" : "bg-gradient-to-r from-blue-500 to-blue-600 text-white";
 35 |   const buttonClass = `px-4 py-2 rounded-md transition font-medium ${isDarkMode ? "text-blue-400 hover:bg-blue-800 border border-blue-400" : "text-blue-600 hover:bg-blue-50 border border-blue-600"}`;
 36 |   const primaryButtonClass = `px-4 py-2 rounded-md transition font-medium ${isDarkMode ? "bg-blue-700 text-white hover:bg-blue-600" : "bg-blue-600 text-white hover:bg-blue-700"}`;
 37 |   const sectionBgClass = isDarkMode ? "bg-gray-800 shadow-md text-white" : "bg-white shadow-md text-gray-600";
 38 |   const sectionTitleClass = `text-2xl font-semibold mb-4 ${isDarkMode ? "text-blue-400" : "text-blue-600"}`;
 39 |   const footerBgClass = isDarkMode ? "bg-gray-800 border-t border-gray-700" : "bg-white border-t";
 40 |   const footerLinkClass = `hover:underline ${isDarkMode ? "text-blue-400" : "text-blue-600"}`;
 41 |   const footerTextColorClass = isDarkMode ? "text-gray-400" : "text-gray-600";
 42 | 
 43 |   return (
 44 |     <div className={`${darkClass} flex flex-col min-h-screen ${bgColorClass} ${textColorClass}`}>
 45 |       <nav className={`flex justify-between items-center p-6 ${navBgClass}`}>
 46 |         <h1 className={`text-4xl font-bold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>ReturnIt</h1>
 47 |         <div className="flex gap-3">
 48 |           <button
 49 |              onClick={() => handleRedirect('/login')}
 50 |             className={buttonClass}
 51 |           >
 52 |             Login
 53 |           </button>
 54 |           <button
 55 |              onClick={() => handleRedirect('/signup')}
 56 |             className={primaryButtonClass}
 57 |           >
 58 |             Sign Up
 59 |           </button>
 60 |         </div>
 61 |       </nav>
 62 | 
 63 |       <header className={`flex flex-col items-center justify-center text-center px-6 py-20 ${headerBgClass}`}>
 64 |         <h2 className="text-4xl font-bold mb-6">Find Lost Items, Report Found Items</h2>
 65 |         <p className="max-w-2xl text-lg opacity-90">
 66 |           Welcome to ReturnIt – Your Campus Lost & Found Solution!
 67 |           Losing or finding an item on campus can be stressful, but ReturnIt is here to make the process simple and secure!
 68 |         </p>
 69 |       </header>
 70 | 
 71 |       <main className="flex flex-col items-center px-6 py-12 space-y-8 max-w-7xl mx-auto">
 72 |         <section className={`w-full ${sectionBgClass} p-8 rounded-xl`}>
 73 |           <h3 className={sectionTitleClass}>Recent Lost & Found Cases</h3>
 74 |           <p className={`${isDarkMode ? "text-gray-400" : "text-gray-600"}`}>
 75 |             Lost something? Found something? Our platform helps reunite items with their owners.
 76 |             The more you use ReturnIt, the more effective our community becomes!
 77 |           </p>
 78 |         </section>
 79 | 
 80 |         <section className={`w-full ${sectionBgClass} p-8 rounded-xl`}>
 81 |           <h3 className={sectionTitleClass}>How It Works</h3>
 82 |           <div className="space-y-4">
 83 |             <div className="flex items-start">
 84 |               <span className={`flex-shrink-0 rounded-full p-2 mr-3 ${isDarkMode ? "bg-blue-800 text-blue-400" : "bg-blue-100 text-blue-600"}`}>1</span>
 85 |               <p>Sign Up & Secure Your Account</p>
 86 |             </div>
 87 |             <div className="flex items-start">
 88 |               <span className={`flex-shrink-0 rounded-full p-2 mr-3 ${isDarkMode ? "bg-blue-800 text-blue-400" : "bg-blue-100 text-blue-600"}`}>2</span>
 89 |               <p>Post About Lost or Found Items</p>
 90 |             </div>
 91 |             <div className="flex items-start">
 92 |               <span className={`flex-shrink-0 rounded-full p-2 mr-3 ${isDarkMode ? "bg-blue-800 text-blue-400" : "bg-blue-100 text-blue-600"}`}>3</span>
 93 |               <p>Smart Validation System for Security</p>
 94 |             </div>
 95 |             <div className="flex items-start">
 96 |               <span className={`flex-shrink-0 rounded-full p-2 mr-3 ${isDarkMode ? "bg-blue-800 text-blue-400" : "bg-blue-100 text-blue-600"}`}>4</span>
 97 |               <p>Easy Communication to Return Items</p>
 98 |             </div>
 99 |           </div>
100 |         </section>
101 |       </main>
102 | 
103 |       <footer className={`mt-auto py-8 ${footerBgClass}`}>
104 |         <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-3 gap-8">
105 |           <div>
106 |             <p className={`text-sm ${footerTextColorClass}`}>
107 |               © {new Date().getFullYear()} <span className={`font-semibold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>ReturnIt</span>. All rights reserved.
108 |             </p>
109 |             <p className={`text-sm mt-2 ${footerTextColorClass}`}>
110 |               We’re committed to helping users find and return lost items safely and securely using modern technology and community collaboration.
111 |             </p>
112 |           </div>
113 |           <div className="flex flex-col items-start">
114 |             <div className={`flex items-center font-semibold mb-2 ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>
115 |               <SupportAgentIcon className="mr-2" />
116 |               Contact Us
117 |             </div>
118 |             <div className="flex items-center text-sm">
119 |               <EmailIcon className={`mr-2 ${isDarkMode ? "text-blue-500" : "text-blue-500"}`} />
120 |               <a href="mailto:support@returnit.com" className={`${footerLinkClass}`}>
121 |                 support@returnit.com
122 |               </a>
123 |             </div>
124 |             <p className={`text-sm mt-2 ${footerTextColorClass}`}>
125 |               Support available: 24/7
126 |             </p>
127 |           </div>
128 |           <div className="flex flex-col items-start">
129 |             <div className={`font-semibold mb-2 ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>Our Policies</div>
130 |             <div className="flex items-center text-sm mb-1">
131 |               <GavelIcon className={`mr-2 ${isDarkMode ? "text-blue-500" : "text-blue-500"}`} />
132 |               <a href="#" className={footerLinkClass}>Terms of Service</a>
133 |             </div>
134 |             <div className="flex items-center text-sm mb-1">
135 |               <PrivacyTipIcon className={`mr-2 ${isDarkMode ? "text-blue-500" : "text-blue-500"}`} />
136 |               <a href="#" className={footerLinkClass}>Privacy Policy</a>
137 |             </div>
138 |             <div className="flex items-center text-sm">
139 |               <HelpOutlineIcon className={`mr-2 ${isDarkMode ? "text-blue-500" : "text-blue-500"}`} />
140 |               <a href="#" className={footerLinkClass}>FAQ</a>
141 |             </div>
142 |           </div>
143 |         </div>
144 |       </footer>
145 |     </div>
146 |   );
147 | }


--------------------------------------------------------------------------------
/client/src/pages/SignUp.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import { useNavigate } from "react-router-dom";
  3 | import { FaGoogle } from "react-icons/fa";
  4 | import { auth, googleProvider } from "../firebaseConfig";
  5 | import { CircularProgress } from "@mui/material";
  6 | import { createUserWithEmailAndPassword, signInWithPopup, updateProfile } from "firebase/auth";
  7 | import { toast } from "react-hot-toast";
  8 | 
  9 | const SignUp = () => {
 10 |   const [username, setUsername] = useState("");
 11 |   const [email, setEmail] = useState("");
 12 |   const [password, setPassword] = useState("");
 13 |   const [confirmPassword, setConfirmPassword] = useState("");
 14 |   const [loading, setLoading] = useState(false);
 15 |   const navigate = useNavigate();
 16 |   const [isDarkMode, setIsDarkMode] = useState(() => {
 17 |     const storedTheme = localStorage.getItem("darkMode");
 18 |     return storedTheme ? storedTheme === "true" : false;
 19 |   });
 20 | 
 21 |   const handleSignUp = async (e) => {
 22 |     e.preventDefault();
 23 | 
 24 |     if (!username.trim()) return toast.error("Username is required");
 25 |     if (!email.trim()) return toast.error("Email is required");
 26 |     if (!password) return toast.error("Password is required");
 27 |     if (password.length < 6) return toast.error("Password must be at least 6 characters");
 28 |     if (password !== confirmPassword) return toast.error("Passwords do not match");
 29 | 
 30 |     setLoading(true);
 31 | 
 32 |     try {
 33 |       const userCredential = await createUserWithEmailAndPassword(auth, email, password);
 34 |       const user = userCredential.user;
 35 |       await updateProfile(user, { displayName: username });
 36 | 
 37 |       const idToken = await user.getIdToken();
 38 | 
 39 |       const res = await fetch("https://los-n-found.onrender.com/api/auth/signup", {
 40 |         method: "POST",
 41 |         headers: { "Content-Type": "application/json", "Authorization": `Bearer ${idToken}`, },
 42 |         body: JSON.stringify({ uid: user.uid, username, email }),
 43 |       });
 44 | 
 45 |       if (!res.ok) throw new Error("Failed to save user to database");
 46 | 
 47 |       toast.success("Account created successfully!");
 48 |       navigate("/Home");
 49 |     } catch (err) {
 50 |       console.error("Signup Error:", err);
 51 |       switch (err.code) {
 52 |         case "auth/email-already-in-use":
 53 |           toast.error("Email already in use.");
 54 |           break;
 55 |         case "auth/invalid-email":
 56 |           toast.error("Invalid email address.");
 57 |           break;
 58 |         case "auth/weak-password":
 59 |           toast.error("Password too weak (min 6 characters).");
 60 |           break;
 61 |         default:
 62 |           toast.error(err.message || "Something went wrong.");
 63 |       }
 64 |     } finally {
 65 |       setLoading(false);
 66 |     }
 67 |   };
 68 | 
 69 |   const handleGoogleSignIn = async () => {
 70 |     try {
 71 |       const userCredential = await signInWithPopup(auth, googleProvider);
 72 |       const user = userCredential.user;
 73 | 
 74 |       await fetch("https://los-n-found.onrender.com/api/auth/signup", {
 75 |         method: "POST",
 76 |         headers: { "Content-Type": "application/json" },
 77 |         body: JSON.stringify({ uid: user.uid, username: user.displayName, email: user.email }),
 78 |       });
 79 | 
 80 |       toast.success("Signed in with Google!");
 81 |       navigate("/Home");
 82 |     } catch (err) {
 83 |       toast.error(err.message || "Google Sign-In failed.");
 84 |     }
 85 |   };
 86 | 
 87 |   const darkClass = isDarkMode ? "dark" : "";
 88 | 
 89 |   return (
 90 |     <div className={`${darkClass} flex items-center justify-center min-h-screen ${isDarkMode ? "bg-gray-900" : "bg-gradient-to-b from-blue-50 to-white"} p-4`}>
 91 |       <div className={`flex w-full max-w-3xl ${isDarkMode ? "bg-gray-800 text-white" : "bg-white"} shadow-lg rounded-lg overflow-hidden flex-col md:flex-row`}>
 92 |         <div className={`hidden md:flex w-1/2 ${isDarkMode ? "bg-gray-700" : "bg-gradient-to-r from-blue-500 to-blue-600"} text-white flex-col justify-center items-center p-6 text-center`}>
 93 |           <h2 className="text-xl font-semibold">"Join our community of helpful students"</h2>
 94 |           <p className="mt-4">ReturnIt makes campus life easier for everyone</p>
 95 |         </div>
 96 | 
 97 |         <div className="w-full md:w-1/2 p-8">
 98 |           <h3 className={`text-2xl font-semibold ${isDarkMode ? "text-blue-400" : "text-blue-600"} mb-6`}>Create Your Account</h3>
 99 | 
100 |           <form onSubmit={handleSignUp} className="space-y-4">
101 |             <div>
102 |               <label className={`block text-sm mb-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`}>Username</label>
103 |               <input
104 |                 type="text"
105 |                 value={username}
106 |                 onChange={(e) => setUsername(e.target.value)}
107 |                 className={`w-full px-4 py-2 border ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent`}
108 |                 placeholder="Choose a username"
109 |                 required
110 |               />
111 |             </div>
112 | 
113 |             <div>
114 |               <label className={`block text-sm mb-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`}>Email</label>
115 |               <input
116 |                 type="email"
117 |                 value={email}
118 |                 onChange={(e) => setEmail(e.target.value)}
119 |                 className={`w-full px-4 py-2 border ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent`}
120 |                 placeholder="Enter your email"
121 |                 required
122 |               />
123 |             </div>
124 | 
125 |             <div>
126 |               <label className={`block text-sm mb-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`}>Password</label>
127 |               <input
128 |                 type="password"
129 |                 value={password}
130 |                 onChange={(e) => setPassword(e.target.value)}
131 |                 className={`w-full px-4 py-2 border ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent`}
132 |                 placeholder="Create a password"
133 |                 required
134 |               />
135 |             </div>
136 | 
137 |             <div>
138 |               <label className={`block text-sm mb-1 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`}>Confirm Password</label>
139 |               <input
140 |                 type="password"
141 |                 value={confirmPassword}
142 |                 onChange={(e) => setConfirmPassword(e.target.value)}
143 |                 className={`w-full px-4 py-2 border ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300"} rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent`}
144 |                 placeholder="Confirm your password"
145 |                 required
146 |               />
147 |             </div>
148 | 
149 |             <button
150 |               type="submit"
151 |               className={`w-full ${isDarkMode ? "bg-blue-700 hover:bg-blue-600 text-white" : "bg-blue-600 text-white hover:bg-blue-700"} py-2 rounded-lg mt-2 font-medium flex items-center justify-center`}
152 |               disabled={loading}
153 |             >
154 |               {loading ? <CircularProgress size={24} color="inherit" /> : "Sign Up"}
155 |             </button>
156 |           </form>
157 | 
158 |           <div className="flex items-center my-4">
159 |             <div className={`flex-grow border-t ${isDarkMode ? "border-gray-600" : "border-gray-300"}`}></div>
160 |             <span className={`mx-4 text-sm ${isDarkMode ? "text-gray-400" : "text-gray-500"}`}>or</span>
161 |             <div className={`flex-grow border-t ${isDarkMode ? "border-gray-600" : "border-gray-300"}`}></div>
162 |           </div>
163 | 
164 |           <button
165 |             onClick={handleGoogleSignIn}
166 |             className={`w-full flex items-center justify-center border ${isDarkMode ? "border-gray-600 text-white hover:bg-gray-700" : "border-gray-300 hover:bg-gray-50 text-gray-700"} py-2 rounded-lg transition font-medium`}
167 |           >
168 |             <FaGoogle className="text-red-500 mr-2" /> Continue with Google
169 |           </button>
170 | 
171 |           <p className={`text-center mt-6 text-sm ${isDarkMode ? "text-gray-400" : "text-gray-600"}`}>
172 |             Already have an account?{' '}
173 |             <a href="/login" className={`font-medium ${isDarkMode ? "text-blue-400 hover:underline" : "text-blue-600 hover:underline"}`}>
174 |               Log in
175 |             </a>
176 |           </p>
177 |         </div>
178 |       </div>
179 |     </div>
180 |   );
181 | };
182 | 
183 | export default SignUp;


--------------------------------------------------------------------------------
/client/src/pages/Report.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { getAuth } from "firebase/auth";
  3 | import { useNavigate } from "react-router-dom";
  4 | import { app } from "../firebaseConfig";
  5 | import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
  6 | import "leaflet/dist/leaflet.css";
  7 | import L from "leaflet";
  8 | import icon from "leaflet/dist/images/marker-icon.png";
  9 | import iconShadow from "leaflet/dist/images/marker-shadow.png";
 10 | import LinearProgress from '@mui/material/LinearProgress';
 11 | 
 12 | const DefaultIcon = L.icon({
 13 |   iconUrl: icon,
 14 |   shadowUrl: iconShadow,
 15 |   iconSize: [25, 41],
 16 |   iconAnchor: [12, 41],
 17 |   popupAnchor: [1, -34],
 18 |   shadowSize: [41, 41],
 19 | });
 20 | 
 21 | L.Marker.prototype.options.icon = DefaultIcon;
 22 | 
 23 | export default function ReportPage() {
 24 |   const [category, setCategory] = useState("");
 25 |   const [description, setDescription] = useState("");
 26 |   const [location, setLocation] = useState({ lat: null, lng: null });
 27 |   const [imageFile, setImageFile] = useState(null);
 28 |   const [error, setError] = useState(null);
 29 |   const [loading, setLoading] = useState(false);
 30 |   const [success, setSuccess] = useState(false);
 31 |   const [isDarkMode, setIsDarkMode] = useState(() => {
 32 |     const storedTheme = localStorage.getItem("darkMode");
 33 |     return storedTheme ? storedTheme === "true" : false;
 34 |   });
 35 | 
 36 |   const navigate = useNavigate();
 37 |   const auth = getAuth(app);
 38 |   const categories = ["Electronics", "Clothing", "Home Appliances", "Books", "Automotive", "Animals/Pets"];
 39 | 
 40 |   useEffect(() => {
 41 |     navigator.geolocation.getCurrentPosition(
 42 |       (pos) => {
 43 |         setLocation({ lat: pos.coords.latitude, lng: pos.coords.longitude });
 44 |       },
 45 |       (err) => console.error("Error getting location:", err),
 46 |       { enableHighAccuracy: true }
 47 |     );
 48 |   }, []);
 49 |   
 50 |   useEffect(() => {
 51 |     if (success) {
 52 |       const timer = setTimeout(() => {
 53 |         navigate("/Home");
 54 |       }, 1500);
 55 |       return () => clearTimeout(timer);
 56 |     }
 57 |   }, [success, navigate]);
 58 | 
 59 |   function LocationMarker() {
 60 |     useMapEvents({
 61 |       click(e) {
 62 |         setLocation({ lat: e.latlng.lat, lng: e.latlng.lng });
 63 |       },
 64 |     });
 65 |     return location.lat && location.lng ? (
 66 |       <Marker position={[location.lat, location.lng]} icon={DefaultIcon} />
 67 |     ) : null;
 68 |   }
 69 | 
 70 |   const handleSubmit = async (e) => {
 71 |     e.preventDefault();
 72 |     setError(null);
 73 |     setSuccess(false);
 74 |     setLoading(true);
 75 | 
 76 |     const user = auth.currentUser;
 77 |     if (!user) {
 78 |       setError("You must be logged in to report a lost item.");
 79 |       setLoading(false);
 80 |       return;
 81 |     }
 82 | 
 83 |     if (!location.lat || !location.lng) {
 84 |       setError("Please select a location on the map.");
 85 |       setLoading(false);
 86 |       return;
 87 |     }
 88 | 
 89 |     let imageUrl = "";
 90 |     if (imageFile) {
 91 |       try {
 92 |         const formData = new FormData();
 93 |         formData.append("image", imageFile);
 94 | 
 95 |         const uploadResponse = await fetch("https://los-n-found.onrender.com/api/cloudinary/upload", {
 96 |           method: "POST",
 97 |           body: formData,
 98 |         });
 99 | 
100 |         const uploadData = await uploadResponse.json();
101 |         if (uploadResponse.ok) {
102 |           imageUrl = uploadData.imageUrl;
103 |         } else {
104 |           throw new Error("Image upload failed.");
105 |         }
106 |       } catch (error) {
107 |         setError("Image upload failed. Please try again.");
108 |         setLoading(false);
109 |         return;
110 |       }
111 |     }
112 | 
113 |     const reportData = {
114 |       category,
115 |       description,
116 |       location,
117 |       imageUrl,
118 |       userId: user.uid,
119 |     };
120 | 
121 |     try {
122 |       const response = await fetch("https://los-n-found.onrender.com/api/report", {
123 |         method: "POST",
124 |         headers: {
125 |           "Content-Type": "application/json",
126 |           Authorization: `Bearer ${await user.getIdToken()}`,
127 |         },
128 |         body: JSON.stringify(reportData),
129 |       });
130 | 
131 |       const data = await response.json();
132 |       if (response.ok) {
133 |         setSuccess(true);
134 |         setCategory("");
135 |         setDescription("");
136 |         setLocation({ lat: null, lng: null });
137 |         setImageFile(null);
138 |       } else {
139 |         setError(data.error || "Something went wrong.");
140 |       }
141 |     } catch (err) {
142 |       setError("Server error, please try again.");
143 |     }
144 | 
145 |     setLoading(false);
146 |   };
147 | 
148 |   const darkClass = isDarkMode ? "dark" : "";
149 | 
150 |   return (
151 |     <div className={`${darkClass} min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} p-4`}>
152 |       <div className="max-w-4xl mx-auto">
153 |         <div className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"} rounded-xl shadow-md overflow-hidden`}>
154 |           <div className="p-6 md:p-8">
155 |             <div className="flex justify-between items-center mb-6">
156 |               <h2 className={`text-2xl font-bold ${isDarkMode ? "text-white" : "text-gray-800"}`}>Report a Lost Item</h2>
157 |               <button
158 |                 onClick={() => navigate("/Home")}
159 |                 className="text-blue-600 hover:text-blue-800 font-medium"
160 |               >
161 |                 ← Back to Home
162 |               </button>
163 |             </div>
164 | 
165 |             {loading && <LinearProgress color="primary" className="mb-4" />}
166 |             {error && <p className="text-red-500 mb-4 text-center">{error}</p>}
167 |             {success && (
168 |               <div className="bg-green-100 text-green-800 p-4 rounded-lg mb-4 text-center">
169 |                 Item reported successfully!
170 |               </div>
171 |             )}
172 | 
173 |             <form onSubmit={handleSubmit} className="space-y-6">
174 |               <div>
175 |                 <label className={`block text-sm font-medium mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`}>Category</label>
176 |                 <select
177 |                   value={category}
178 |                   onChange={(e) => setCategory(e.target.value)}
179 |                   className={`w-full px-4 py-3 border ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent`}
180 |                   required
181 |                 >
182 |                   <option value="">Select a category</option>
183 |                   {categories.map((cat) => (
184 |                     <option key={cat} value={cat}>{cat}</option>
185 |                   ))}
186 |                 </select>
187 |               </div>
188 | 
189 |               <div>
190 |                 <label className={`block text-sm font-medium mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`}>Description</label>
191 |                 <textarea
192 |                   value={description}
193 |                   onChange={(e) => setDescription(e.target.value)}
194 |                   className={`w-full px-4 py-3 border ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300"} rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent`}
195 |                   placeholder="Describe the lost item (color, brand, identifying marks, etc.)"
196 |                   rows="4"
197 |                   required
198 |                 />
199 |               </div>
200 | 
201 |               <div>
202 |                 <label className={`block text-sm font-medium mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`}>Location</label>
203 |                 <div className="h-64 rounded-lg overflow-hidden border border-gray-300">
204 |                   {location.lat && location.lng ? (
205 |                     <MapContainer
206 |                       center={[location.lat, location.lng]}
207 |                       zoom={15}
208 |                       style={{ height: "100%", width: "100%" }}
209 |                       className={isDarkMode ? "leaflet-container-dark" : ""}
210 |                     >
211 |                       <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
212 |                       <LocationMarker />
213 |                     </MapContainer>
214 |                   ) : (
215 |                     <div className="h-full flex items-center justify-center text-gray-500">
216 |                       Loading map...
217 |                     </div>
218 |                   )}
219 |                 </div>
220 |                 <p className={`mt-2 text-sm ${isDarkMode ? "text-gray-400" : "text-gray-500"}`}>Click on the map to mark the location</p>
221 |               </div>
222 | 
223 |               <div>
224 |                 <label className={`block text-sm font-medium mb-2 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`}>Upload Image (Optional)</label>
225 |                 <div className="flex items-center">
226 |                   <label className="cursor-pointer">
227 |                     <span className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
228 |                       Choose File
229 |                     </span>
230 |                     <input
231 |                       type="file"
232 |                       accept="image/*"
233 |                       onChange={(e) => setImageFile(e.target.files[0])}
234 |                       className="hidden"
235 |                     />
236 |                   </label>
237 |                   {imageFile && (
238 |                     <span className={`ml-3 text-sm ${isDarkMode ? "text-gray-400" : "text-gray-700"}`}>{imageFile.name}</span>
239 |                   )}
240 |                 </div>
241 |               </div>
242 | 
243 |               <button
244 |                 type="submit"
245 |                 className={`w-full ${isDarkMode ? "bg-blue-700 hover:bg-blue-600 text-white" : "bg-blue-600 text-white hover:bg-blue-700"} py-3 rounded-lg transition font-medium disabled:bg-gray-400`}
246 |                 disabled={loading}
247 |               >
248 |                 {loading ? "Submitting..." : "Report Item"}
249 |               </button>
250 |             </form>
251 |           </div>
252 |         </div>
253 |       </div>
254 |     </div>
255 |   );
256 | }


--------------------------------------------------------------------------------
/client/src/pages/Recent.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { auth } from "../firebaseConfig";
  3 | import axios from "axios";
  4 | import { useNavigate } from "react-router-dom";
  5 | import { CircularProgress } from "@mui/material";
  6 | import {
  7 |   ArrowBack,
  8 |   Search,
  9 |   ShoppingCart,
 10 |   Check,
 11 |   SentimentDissatisfied,
 12 |   Email
 13 | } from "@mui/icons-material";
 14 | 
 15 | const RecentUpdates = () => {
 16 |   const [matches, setMatches] = useState([]);
 17 |   const [loading, setLoading] = useState(true);
 18 |   const [loadingText, setLoadingText] = useState("Searching for matches...");
 19 |   const [progress, setProgress] = useState(0);
 20 |   const [emailStatus, setEmailStatus] = useState(null);
 21 |   const user = auth.currentUser;
 22 |   const navigate = useNavigate();
 23 |   const [isDarkMode, setIsDarkMode] = useState(() => {
 24 |     const storedTheme = localStorage.getItem("darkMode");
 25 |     return storedTheme ? storedTheme === "true" : false;
 26 |   });
 27 | 
 28 |   useEffect(() => {
 29 |     if (!user) {
 30 |       navigate("/login");
 31 |       return;
 32 |     }
 33 | 
 34 |     setLoading(true);
 35 |     setProgress(0);
 36 | 
 37 |     axios.get(`https://los-n-found.onrender.com/api/matches/${user.uid}`, {
 38 |       onDownloadProgress: (progressEvent) => {
 39 |         const percentCompleted = Math.round(
 40 |           (progressEvent.loaded * 100) / (progressEvent.total || 100)
 41 |         );
 42 |         setProgress(percentCompleted);
 43 |       }
 44 |     })
 45 |       .then((response) => {
 46 |         if (response.data && Array.isArray(response.data)) {
 47 |           setMatches(response.data);
 48 |         } else {
 49 |           setMatches([]);
 50 |         }
 51 |       })
 52 |       .catch((error) => {
 53 |         console.error("Error fetching matches:", error);
 54 |         setMatches([]);
 55 |       })
 56 |       .finally(() => {
 57 |         setLoading(false);
 58 |         setProgress(100);
 59 |       });
 60 |   }, [user, navigate]);
 61 | 
 62 |   useEffect(() => {
 63 |     if (!loading) return;
 64 | 
 65 |     const messages = [
 66 |       "Searching database for potential matches...",
 67 |       "Analyzing item descriptions...",
 68 |       "Comparing with recently found items...",
 69 |       "Calculating match probabilities...",
 70 |       "Verifying results..."
 71 |     ];
 72 | 
 73 |     let i = 0;
 74 |     const interval = setInterval(() => {
 75 |       i = (i + 1) % messages.length;
 76 |       setLoadingText(messages[i]);
 77 |     }, 2000);
 78 | 
 79 |     return () => clearInterval(interval);
 80 |   }, [loading]);
 81 | 
 82 |   const handleSendEmail = async (ownerUid, itemDetails, title) => {
 83 |     setEmailStatus("sending");
 84 |     try {
 85 |       const response = await axios.post("https://los-n-found.onrender.com/api/send-email", {
 86 |         ownerUid,
 87 |         senderEmail: user.email,
 88 |         itemDetails,
 89 |         title: `Potential Match: ${title}`,
 90 |         message: `I believe this might be my lost item. Here are the details: ${itemDetails}`
 91 |       });
 92 |       setEmailStatus("success");
 93 |       setTimeout(() => setEmailStatus(null), 3000);
 94 |     } catch (error) {
 95 |       console.error("Error sending email:", error);
 96 |       setEmailStatus("error");
 97 |       setTimeout(() => setEmailStatus(null), 3000);
 98 |     }
 99 |   };
100 | 
101 |   const darkClass = isDarkMode ? "dark" : "";
102 | 
103 |   return (
104 |     <div className={`${darkClass} min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} p-4`}>
105 |       <div className="max-w-4xl mx-auto">
106 |         <div className="flex justify-between items-center mb-6">
107 |           <h1 className={`text-2xl font-bold ${isDarkMode ? "text-white" : "text-gray-800"} flex items-center`}>
108 |             <Search color="primary" className="mr-2" />
109 |             Potential Matches
110 |           </h1>
111 |           <button
112 |             onClick={() => navigate("/Home")}
113 |             className="text-blue-600 hover:text-blue-800 font-medium flex items-center"
114 |           >
115 |             <ArrowBack className="mr-1" />
116 |             Back to Home
117 |           </button>
118 |         </div>
119 | 
120 |         {emailStatus === "sending" && (
121 |           <div className="bg-blue-50 text-blue-800 p-3 rounded-lg mb-4 flex items-center">
122 |             <CircularProgress size={20} className="mr-2" />
123 |             Sending email...
124 |           </div>
125 |         )}
126 |         {emailStatus === "success" && (
127 |           <div className="bg-green-50 text-green-800 p-3 rounded-lg mb-4 flex items-center">
128 |             <Check className="mr-2" />
129 |             Email sent successfully!
130 |           </div>
131 |         )}
132 |         {emailStatus === "error" && (
133 |           <div className="bg-red-50 text-red-800 p-3 rounded-lg mb-4 flex items-center">
134 |             <SentimentDissatisfied className="mr-2" />
135 |             Failed to send email. Please try again.
136 |           </div>
137 |         )}
138 | 
139 |         {loading && (
140 |           <div className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white"} rounded-xl shadow-md p-8`}>
141 |             <div className="text-center">
142 |               <CircularProgress
143 |                 size={50}
144 |                 className="text-blue-600 mb-4"
145 |                 thickness={4}
146 |                 style={{ color: isDarkMode ? '#64b5f6' : '#1e88e5' }}
147 |               />
148 |               <p className={`${isDarkMode ? "text-gray-400" : "text-gray-600"} animate-pulse`}>{loadingText}</p>
149 |             </div>
150 |           </div>
151 |         )}
152 | 
153 |         {!loading && matches.length === 0 && (
154 |           <div className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white"} rounded-xl shadow-md p-8 text-center`}>
155 |             <div className="text-gray-400 mb-4">
156 |               <SentimentDissatisfied style={{ fontSize: 64 }} className="mx-auto" />
157 |             </div>
158 |             <h3 className={`text-xl font-medium ${isDarkMode ? "text-gray-300" : "text-gray-700"} mb-2`}>No matches found</h3>
159 |             <p className={`${isDarkMode ? "text-gray-500" : "text-gray-500"}`}>We'll notify you when we find potential matches for your lost items.</p>
160 |           </div>
161 |         )}
162 | 
163 |         {!loading && matches.length > 0 && (
164 |           <div className="space-y-6">
165 |             {matches.map(({ lostItem, topMatches }) => (
166 |               <div key={lostItem.id} className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white"} rounded-xl shadow-md overflow-hidden`}>
167 | 
168 |                 <div className={`${isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "bg-blue-50 border-blue-100 text-gray-700"} p-4 border-b`}>
169 |                   <h3 className={`text-lg font-semibold flex items-center ${isDarkMode ? "text-blue-400" : "text-blue-700"}`}>
170 |                     <ShoppingCart color="primary" className="mr-2" style={{ color: isDarkMode ? '#64b5f6' : '#1e88e5' }} />
171 |                     Your Lost Item
172 |                   </h3>
173 |                   <p className="mt-1">{lostItem.description}</p>
174 |                   {lostItem.imageUrl && (
175 |                     <div className="mt-4 flex justify-center">
176 |                       <div className="max-w-full max-h-96 overflow-hidden rounded-md border border-gray-200">
177 |                         <img
178 |                           src={lostItem.imageUrl}
179 |                           alt="Lost item"
180 |                           className="w-full h-auto max-h-96 object-contain"
181 |                           style={{ display: 'block' }}
182 |                         />
183 |                       </div>
184 |                     </div>
185 |                   )}
186 |                 </div>
187 |                 <div className="p-4">
188 |                   <h4 className={`text-md font-medium flex items-center ${isDarkMode ? "text-gray-300" : "text-gray-800"} mb-3`}>
189 |                     <Check color="success" className="mr-2" style={{ color: '#4caf50' }} />
190 |                     Potential Matches ({topMatches.length})
191 |                   </h4>
192 | 
193 |                   {topMatches.length > 0 ? (
194 |                     <div className="space-y-3">
195 |                       {topMatches.map((match) => (
196 |                         <div
197 |                           key={match.foundItem.id}
198 |                           className={`${isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "bg-white border-gray-200 text-gray-700"} p-3 border rounded-lg hover:border-blue-300 transition-colors`}
199 |                         >
200 |                           <div className="flex justify-between items-start">
201 |                             <div>
202 |                               <p className="font-medium">{match.foundItem.description}</p>
203 |                             </div>
204 |                             <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
205 |                               {match.similarity ? `${(match.similarity * 100).toFixed(1)}% match` : "Possible match"}
206 |                             </span>
207 |                           </div>
208 |                           {match.foundItem.imageUrl && (
209 |                             <div className="mt-2">
210 |                               <img
211 |                                 src={match.foundItem.imageUrl}
212 |                                 alt="Found item"
213 |                                 className="h-full w-full object-cover rounded-md border border-gray-200"
214 |                               />
215 |                             </div>
216 |                           )}
217 |                           <div className="mt-3 flex space-x-2">
218 |                             <button
219 |                               onClick={() => handleSendEmail(
220 |                                 match.foundItem.userId,
221 |                                 lostItem.description,
222 |                                 lostItem.type
223 |                               )}
224 |                               className={`flex-1 ${isDarkMode ? "bg-blue-700 hover:bg-blue-600 text-white" : "bg-blue-600 text-white hover:bg-blue-700"} px-3 py-2 rounded-md transition flex items-center justify-center text-sm`}
225 |                             >
226 |                               <Email className="mr-1" style={{ fontSize: 16 }} />
227 |                               Send Email
228 |                             </button>
229 | 
230 |                           </div>
231 |                         </div>
232 |                       ))}
233 |                     </div>
234 |                   ) : (
235 |                     <div className={`${isDarkMode ? "bg-gray-600 text-gray-400" : "bg-gray-50 text-gray-500"} p-4 rounded-lg text-center`}>
236 |                       No close matches found for this item
237 |                     </div>
238 |                   )}
239 |                 </div>
240 |               </div>
241 |             ))}
242 |           </div>
243 |         )}
244 |       </div>
245 |     </div>
246 |   );
247 | };
248 | 
249 | export default RecentUpdates;


--------------------------------------------------------------------------------
/client/src/pages/Found.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { getAuth } from "firebase/auth";
  3 | import { useNavigate } from "react-router-dom";
  4 | import { app } from "../firebaseConfig";
  5 | import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
  6 | import "leaflet/dist/leaflet.css";
  7 | import L from "leaflet";
  8 | import icon from "leaflet/dist/images/marker-icon.png";
  9 | import iconShadow from "leaflet/dist/images/marker-shadow.png";
 10 | import LinearProgress from '@mui/material/LinearProgress';
 11 | 
 12 | const DefaultIcon = L.icon({
 13 |   iconUrl: icon,
 14 |   shadowUrl: iconShadow,
 15 |   iconSize: [25, 41],
 16 |   iconAnchor: [12, 41],
 17 |   popupAnchor: [1, -34],
 18 |   shadowSize: [41, 41],
 19 | });
 20 | 
 21 | L.Marker.prototype.options.icon = DefaultIcon;
 22 | 
 23 | export default function FoundPage() {
 24 |   const [category, setCategory] = useState("");
 25 |   const [description, setDescription] = useState("");
 26 |   const [location, setLocation] = useState({ lat: null, lng: null });
 27 |   const [imageFile, setImageFile] = useState(null);
 28 |   const [error, setError] = useState(null);
 29 |   const [loading, setLoading] = useState(false);
 30 |   const [success, setSuccess] = useState(false);
 31 |   const [isDarkMode, setIsDarkMode] = useState(false);
 32 | 
 33 |   const navigate = useNavigate();
 34 |   const auth = getAuth(app);
 35 |   const categories = ["Electronics", "Clothing", "Home Appliances", "Books", "Automotive", "Animals/Pets"];
 36 | 
 37 |   useEffect(() => {
 38 |     const storedTheme = localStorage.getItem("darkMode");
 39 |     setIsDarkMode(storedTheme === "true");
 40 | 
 41 |     navigator.geolocation.getCurrentPosition(
 42 |       (pos) => {
 43 |         setLocation({ lat: pos.coords.latitude, lng: pos.coords.longitude });
 44 |       },
 45 |       (err) => console.error("Error getting location:", err),
 46 |       { enableHighAccuracy: true }
 47 |     );
 48 |   }, []);
 49 | 
 50 |   useEffect(() => {
 51 |     if (success) {
 52 |       const timer = setTimeout(() => {
 53 |         navigate("/Home");
 54 |       }, 1500);
 55 |       return () => clearTimeout(timer);
 56 |     }
 57 |   }, [success, navigate]);
 58 | 
 59 |   function LocationMarker() {
 60 |     useMapEvents({
 61 |       click(e) {
 62 |         setLocation({ lat: e.latlng.lat, lng: e.latlng.lng });
 63 |       },
 64 |     });
 65 |     return location.lat && location.lng ? (
 66 |       <Marker position={[location.lat, location.lng]} icon={DefaultIcon} />
 67 |     ) : null;
 68 |   }
 69 | 
 70 |   const handleSubmit = async (e) => {
 71 |     e.preventDefault();
 72 |     setError(null);
 73 |     setSuccess(false);
 74 |     setLoading(true);
 75 | 
 76 |     const user = auth.currentUser;
 77 |     if (!user) {
 78 |       setError("You must be logged in to report a found item.");
 79 |       setLoading(false);
 80 |       return;
 81 |     }
 82 | 
 83 |     if (!location.lat || !location.lng) {
 84 |       setError("Please select a location on the map.");
 85 |       setLoading(false);
 86 |       return;
 87 |     }
 88 | 
 89 |     let imageUrl = "";
 90 |     if (imageFile) {
 91 |       try {
 92 |         const formData = new FormData();
 93 |         formData.append("image", imageFile);
 94 | 
 95 |         const uploadResponse = await fetch("https://los-n-found.onrender.com/api/cloudinary/upload", {
 96 |           method: "POST",
 97 |           body: formData,
 98 |         });
 99 | 
100 |         const uploadData = await uploadResponse.json();
101 |         if (uploadResponse.ok) {
102 |           imageUrl = uploadData.imageUrl;
103 |         } else {
104 |           throw new Error("Image upload failed.");
105 |         }
106 |       } catch (error) {
107 |         setError("Image upload failed. Please try again.");
108 |         setLoading(false);
109 |         return;
110 |       }
111 |     }
112 | 
113 |     const foundData = {
114 |       category,
115 |       description,
116 |       location,
117 |       imageUrl,
118 |     };
119 | 
120 |     try {
121 |       const response = await fetch("https://los-n-found.onrender.com/api/found", {
122 |         method: "POST",
123 |         headers: {
124 |           "Content-Type": "application/json",
125 |           Authorization: `Bearer ${await user.getIdToken()}`,
126 |         },
127 |         body: JSON.stringify(foundData),
128 |       });
129 | 
130 |       const data = await response.json();
131 |       if (response.ok) {
132 |         setSuccess(true);
133 |         setCategory("");
134 |         setDescription("");
135 |         setLocation({ lat: null, lng: null });
136 |         setImageFile(null);
137 |       } else {
138 |         setError(data.error || "Something went wrong.");
139 |       }
140 |     } catch (err) {
141 |       setError("Server error, please try again.");
142 |     }
143 | 
144 |     setLoading(false);
145 |   };
146 | 
147 |   return (
148 |     <div className={`min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} p-4 transition-colors duration-500`}>
149 |       <div className="max-w-4xl mx-auto">
150 |         <div className={`rounded-xl shadow-md overflow-hidden ${isDarkMode ? "bg-gray-800" : "bg-white"}`}>
151 |           <div className="p-6 md:p-8">
152 |             <div className="flex justify-between items-center mb-6">
153 |               <h2 className={`text-2xl font-bold ${isDarkMode ? "text-white" : "text-gray-800"}`}>Report a Found Item</h2>
154 |               <button
155 |                 onClick={() => navigate("/Home")}
156 |                 className={`${isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-800"} font-medium`}
157 |               >
158 |                 ← Back to Home
159 |               </button>
160 |             </div>
161 | 
162 |             {loading && <LinearProgress color="primary" className="mb-4" />}
163 |             {error && <p className="text-red-500 mb-4 text-center">{error}</p>}
164 |             {success && (
165 |               <div className={`p-4 rounded-lg mb-4 text-center ${
166 |                 isDarkMode ? "bg-green-900 text-green-200" : "bg-green-100 text-green-800"
167 |               }`}>
168 |                 Found item reported successfully! Redirecting to home page...
169 |               </div>
170 |             )}
171 | 
172 |             <form onSubmit={handleSubmit} className="space-y-6">
173 |               <div>
174 |                 <label className={`block text-sm font-medium mb-2 ${
175 |                   isDarkMode ? "text-gray-300" : "text-gray-700"
176 |                 }`}>Category</label>
177 |                 <select
178 |                   value={category}
179 |                   onChange={(e) => setCategory(e.target.value)}
180 |                   className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
181 |                     isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "border-gray-300"
182 |                   }`}
183 |                   required
184 |                 >
185 |                   <option value="">Select a category</option>
186 |                   {categories.map((cat) => (
187 |                     <option key={cat} value={cat}>{cat}</option>
188 |                   ))}
189 |                 </select>
190 |               </div>
191 | 
192 |               <div>
193 |                 <label className={`block text-sm font-medium mb-2 ${
194 |                   isDarkMode ? "text-gray-300" : "text-gray-700"
195 |                 }`}>Description</label>
196 |                 <textarea
197 |                   value={description}
198 |                   onChange={(e) => setDescription(e.target.value)}
199 |                   className={`w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
200 |                     isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "border-gray-300"
201 |                   }`}
202 |                   placeholder="Describe the found item (color, brand, identifying marks, etc.)"
203 |                   rows="4"
204 |                   required
205 |                 />
206 |               </div>
207 | 
208 |               <div>
209 |                 <label className={`block text-sm font-medium mb-2 ${
210 |                   isDarkMode ? "text-gray-300" : "text-gray-700"
211 |                 }`}>Found Location</label>
212 |                 <div className={`h-64 rounded-lg overflow-hidden border ${
213 |                   isDarkMode ? "border-gray-600" : "border-gray-300"
214 |                 }`}>
215 |                   {location.lat && location.lng ? (
216 |                     <MapContainer
217 |                       center={[location.lat, location.lng]}
218 |                       zoom={15}
219 |                       style={{ height: "100%", width: "100%" }}
220 |                     >
221 |                       <TileLayer
222 |                         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
223 |                         attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
224 |                       />
225 |                       <LocationMarker />
226 |                     </MapContainer>
227 |                   ) : (
228 |                     <div className={`h-full flex items-center justify-center ${
229 |                       isDarkMode ? "text-gray-400" : "text-gray-500"
230 |                     }`}>
231 |                       Loading map...
232 |                     </div>
233 |                   )}
234 |                 </div>
235 |                 <p className={`mt-2 text-sm ${
236 |                   isDarkMode ? "text-gray-400" : "text-gray-500"
237 |                 }`}>Click on the map to mark the location where you found the item</p>
238 |               </div>
239 | 
240 |               <div>
241 |                 <label className={`block text-sm font-medium mb-2 ${
242 |                   isDarkMode ? "text-gray-300" : "text-gray-700"
243 |                 }`}>Upload Image (Optional)</label>
244 |                 <div className="flex items-center">
245 |                   <label className="cursor-pointer">
246 |                     <span className={`px-4 py-2 rounded-lg hover:bg-blue-700 transition ${
247 |                       isDarkMode ? "bg-blue-700 text-white" : "bg-blue-600 text-white"
248 |                     }`}>
249 |                       Choose File
250 |                     </span>
251 |                     <input 
252 |                       type="file"
253 |                       accept="image/*"
254 |                       onChange={(e) => setImageFile(e.target.files[0])}
255 |                       className="hidden"
256 |                     />
257 |                   </label>
258 |                   {imageFile && (
259 |                     <span className={`ml-3 ${
260 |                       isDarkMode ? "text-gray-300" : "text-gray-700"
261 |                     }`}>{imageFile.name}</span>
262 |                   )}
263 |                 </div>
264 |               </div>
265 | 
266 |               <button
267 |                 type="submit"
268 |                 className={`w-full py-3 rounded-lg hover:bg-blue-700 transition font-medium disabled:bg-gray-400 ${
269 |                   isDarkMode ? "bg-blue-700 text-white" : "bg-blue-600 text-white"
270 |                 }`}
271 |                 disabled={loading}
272 |               >
273 |                 {loading ? "Submitting..." : "Report Found Item"}
274 |               </button>
275 |             </form>
276 |           </div>
277 |         </div>
278 |       </div>
279 |     </div>
280 |   );
281 | }


--------------------------------------------------------------------------------
/client/src/pages/Nearby.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from "react-leaflet";
  3 | import "leaflet/dist/leaflet.css";
  4 | import axios from "axios";
  5 | import { getAuth, onAuthStateChanged } from "firebase/auth";
  6 | import { app } from "../firebaseConfig";
  7 | import L from "leaflet";
  8 | import icon from "leaflet/dist/images/marker-icon.png";
  9 | import iconShadow from "leaflet/dist/images/marker-shadow.png";
 10 | import { useNavigate } from "react-router-dom";
 11 | import { CircularProgress, IconButton, Tooltip } from "@mui/material";
 12 | import { FaArrowLeft, FaSearch, FaEnvelope, FaMap, FaSatellite, FaLocationArrow } from "react-icons/fa";
 13 | 
 14 | const DefaultIcon = L.icon({
 15 |   iconUrl: icon,
 16 |   shadowUrl: iconShadow,
 17 |   iconSize: [25, 41],
 18 |   iconAnchor: [12, 41],
 19 |   popupAnchor: [1, -34],
 20 |   shadowSize: [41, 41],
 21 | });
 22 | L.Marker.prototype.options.icon = DefaultIcon;
 23 | 
 24 | const MapComponent = () => {
 25 |   const [position, setPosition] = useState(null);
 26 |   const [userLocation, setUserLocation] = useState(null);
 27 |   const [selectedLocation, setSelectedLocation] = useState(null);
 28 |   const [reports, setReports] = useState([]);
 29 |   const [senderEmail, setSenderEmail] = useState("");
 30 |   const [loading, setLoading] = useState(false);
 31 |   const [emailLoading, setEmailLoading] = useState(false);
 32 |   const [error, setError] = useState(null);
 33 |   const [mapView, setMapView] = useState("normal");
 34 |   const [mapInstance, setMapInstance] = useState(null);
 35 |   const [isDarkMode, setIsDarkMode] = useState(() => {
 36 |     const storedTheme = localStorage.getItem("darkMode");
 37 |     return storedTheme ? storedTheme === "true" : false;
 38 |   });
 39 | 
 40 |   const auth = getAuth(app);
 41 |   const navigate = useNavigate();
 42 | 
 43 |   useEffect(() => {
 44 |     onAuthStateChanged(auth, (user) => {
 45 |       if (user) {
 46 |         setSenderEmail(user.email);
 47 |       }
 48 |     });
 49 | 
 50 |     if (navigator.geolocation) {
 51 |       navigator.geolocation.getCurrentPosition(
 52 |         (pos) => {
 53 |           const { latitude, longitude } = pos.coords;
 54 |           setUserLocation([latitude, longitude]);
 55 |           setPosition([latitude, longitude]);
 56 |         },
 57 |         (err) => {
 58 |           console.error("Error fetching location:", err);
 59 |           setUserLocation([51.505, -0.09]);
 60 |           setPosition([51.505, -0.09]);
 61 |         },
 62 |         { enableHighAccuracy: true }
 63 |       );
 64 |     }
 65 |   }, [auth]);
 66 | 
 67 |   const fetchItems = async () => {
 68 |     if (!selectedLocation) {
 69 |       alert("Please select a location on the map first!");
 70 |       return;
 71 |     }
 72 | 
 73 |     setLoading(true);
 74 |     try {
 75 |       const response = await axios.get("https://los-n-found.onrender.com/api/items", {
 76 |         params: {
 77 |           latitude: selectedLocation[0],
 78 |           longitude: selectedLocation[1],
 79 |           radius: 20,
 80 |         },
 81 |       });
 82 | 
 83 |       if (response.data && response.data.items) {
 84 |         setReports(response.data.items);
 85 |       } else {
 86 |         setReports([]);
 87 |       }
 88 |     } catch (error) {
 89 |       setError("Failed to fetch items");
 90 |       console.error("Error fetching items:", error);
 91 |     } finally {
 92 |       setLoading(false);
 93 |     }
 94 |   };
 95 | 
 96 |   const handleSendEmail = async (ownerUid, itemDetails, title) => {
 97 |     setEmailLoading(true);
 98 |     try {
 99 |       const response = await axios.post("https://los-n-found.onrender.com/api/send-email", {
100 |         ownerUid,
101 |         senderEmail: auth.currentUser.email,
102 |         itemDetails,
103 |         title,
104 |       });
105 |       alert(response.data.message);
106 |     } catch (error) {
107 |       console.error("Error sending email:", error);
108 |       alert("Failed to send email");
109 |     } finally {
110 |       setEmailLoading(false);
111 |     }
112 |   };
113 | 
114 |   const LocationMarker = () => {
115 |     const map = useMapEvents({
116 |       click(e) {
117 |         setSelectedLocation([e.latlng.lat, e.latlng.lng]);
118 |       },
119 |     });
120 | 
121 |     useEffect(() => {
122 |       if (map) {
123 |         setMapInstance(map);
124 |       }
125 |     }, [map]);
126 | 
127 |     return selectedLocation ? (
128 |       <Marker position={selectedLocation} icon={DefaultIcon}>
129 |         <Popup className={isDarkMode ? "leaflet-popup-content-wrapper-dark" : ""}>
130 |           <span className={isDarkMode ? "text-gray-800" : "text-gray-800"}>Selected Location</span>
131 |         </Popup>
132 |       </Marker>
133 |     ) : null;
134 |   };
135 | 
136 |   const toggleMapView = () => {
137 |     setMapView(prev => prev === "normal" ? "satellite" : "normal");
138 |   };
139 | 
140 |   const centerToUserLocation = () => {
141 |     if (mapInstance && userLocation) {
142 |       mapInstance.flyTo(userLocation, 15);
143 |     }
144 |   };
145 | 
146 |   const darkClass = isDarkMode ? "dark" : "";
147 | 
148 |   return (
149 |     <div className={`${darkClass} min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} flex flex-col`}>
150 |       <div className={`${isDarkMode ? "bg-gray-800 text-white shadow-md" : "bg-white shadow-sm text-gray-800"} p-4 flex justify-between items-center`}>
151 |         <h1 className="text-xl font-bold flex items-center">
152 |           <FaSearch className="mr-2 text-blue-600" />
153 |           Map Search
154 |         </h1>
155 |         <button
156 |           onClick={() => navigate("/Home")}
157 |           className="text-blue-600 hover:text-blue-800 font-medium flex items-center"
158 |         >
159 |           <FaArrowLeft className="mr-1" />
160 |           Back
161 |         </button>
162 |       </div>
163 | 
164 |       <div className="flex-grow relative" style={{ height: "60vh" }}>
165 |         {position ? (
166 |           <MapContainer
167 |             center={position}
168 |             zoom={13}
169 |             className="h-full w-full"
170 |             style={{ zIndex: 0 }}
171 |             whenCreated={(map) => setMapInstance(map)}
172 |           >
173 |             {mapView === "normal" ? (
174 |               <TileLayer
175 |                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
176 |                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
177 |               />
178 |             ) : (
179 |               <TileLayer
180 |                 url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
181 |                 attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
182 |               />
183 |             )}
184 | 
185 |             {userLocation && (
186 |               <Marker position={userLocation} icon={DefaultIcon}>
187 |                 <Popup className={isDarkMode ? "leaflet-popup-content-wrapper-dark" : ""}>
188 |                   <span className={isDarkMode ? "text-gray-800" : "text-gray-800"}>You are here</span>
189 |                 </Popup>
190 |               </Marker>
191 |             )}
192 |             <LocationMarker />
193 |             {reports.map((report, index) => (
194 |               <Marker
195 |                 key={index}
196 |                 position={[report.location.lat, report.location.lng]}
197 |                 icon={DefaultIcon}
198 |               >
199 |                 <Popup className={`custom-popup ${isDarkMode ? "leaflet-popup-content-wrapper-dark" : ""}`}>
200 |                   <div className="p-2">
201 |                     <h3 className={`${isDarkMode ? "text-gray-800" : "text-gray-800"} font-bold`}>{report.description}</h3>
202 |                     <p className={`${isDarkMode ? "text-gray-600" : "text-gray-600"}`}>Type: {report.type}</p>
203 |                     {report.userId && (
204 |                       <button
205 |                         onClick={() => handleSendEmail(report.userId, report.description, report.type)}
206 |                         className={`mt-2 w-full ${isDarkMode ? "bg-blue-700 hover:bg-blue-600 text-white" : "bg-blue-600 text-white hover:bg-blue-700"} px-3 py-1 rounded-md transition flex items-center justify-center`}
207 |                         disabled={emailLoading}
208 |                       >
209 |                         {emailLoading ? (
210 |                           <>
211 |                             <CircularProgress size={16} color="inherit" className="mr-2" />
212 |                             Sending...
213 |                           </>
214 |                         ) : (
215 |                           <>
216 |                             <FaEnvelope className="mr-1" />
217 |                             Contact Owner
218 |                           </>
219 |                         )}
220 |                       </button>
221 |                     )}
222 |                   </div>
223 |                 </Popup>
224 |               </Marker>
225 |             ))}
226 |             <div className="leaflet-top leaflet-right">
227 |               <div className="leaflet-control leaflet-bar flex flex-col space-y-2">
228 |                 <Tooltip title="Toggle Satellite View" placement="left">
229 |                   <IconButton
230 |                     onClick={toggleMapView}
231 |                     size="small"
232 |                     style={{ backgroundColor: isDarkMode ? '#4a5568' : 'white', color: isDarkMode ? 'white' : 'black' }}
233 |                   >
234 |                     {mapView === "normal" ? <FaSatellite /> : <FaMap />}
235 |                   </IconButton>
236 |                 </Tooltip>
237 |                 <Tooltip title="Center to My Location" placement="left">
238 |                   <IconButton
239 |                     onClick={centerToUserLocation}
240 |                     size="small"
241 |                     style={{ backgroundColor: isDarkMode ? '#4a5568' : 'white', color: isDarkMode ? 'white' : 'black' }}
242 |                   >
243 |                     <FaLocationArrow />
244 |                   </IconButton>
245 |                 </Tooltip>
246 |               </div>
247 |             </div>
248 |           </MapContainer>
249 |         ) : (
250 |           <div className="h-full flex items-center justify-center">
251 |             <CircularProgress className="text-blue-600" />
252 |           </div>
253 |         )}
254 |       </div>
255 | 
256 |       <div className={`${isDarkMode ? "bg-gray-800 text-white border-gray-700" : "bg-white border-gray-200"} p-4 shadow-lg border-t`}>
257 |         {selectedLocation && (
258 |           <p className="text-sm">
259 |             Selected: {selectedLocation[0].toFixed(5)}, {selectedLocation[1].toFixed(5)}
260 |           </p>
261 |         )}
262 | 
263 |         <div className="flex space-x-2 mt-2">
264 |           <button
265 |             onClick={fetchItems}
266 |             className={`flex-grow ${isDarkMode ? "bg-blue-700 hover:bg-blue-600 text-white" : "bg-blue-600 text-white hover:bg-blue-700"} px-4 py-3 rounded-lg transition font-medium flex items-center justify-center`}
267 |             disabled={loading}
268 |           >
269 |             {loading ? (
270 |               <>
271 |                 <CircularProgress size={20} color="inherit" className="mr-2" />
272 |                 Searching...
273 |               </>
274 |             ) : (
275 |               <>
276 |                 <FaSearch className="mr-2" />
277 |                 Search This Area
278 |               </>
279 |             )}
280 |           </button>
281 |         </div>
282 | 
283 |         {error && (
284 |           <p className="mt-2 text-red-500 text-sm text-center">{error}</p>
285 |         )}
286 | 
287 |         {reports.length === 0 && !loading && (
288 |           <p className="mt-2 text-sm text-center">
289 |             {selectedLocation ? "No items found in this area" : "Select a location on the map"}
290 |           </p>
291 |         )}
292 |       </div>
293 |     </div>
294 |   );
295 | };
296 | 
297 | export default MapComponent;


--------------------------------------------------------------------------------
/client/src/pages/Home.jsx:
--------------------------------------------------------------------------------
  1 | import { Link, useNavigate } from "react-router-dom";
  2 | import { useState, useEffect } from "react";
  3 | import { Menu, X, Moon, Sun,HelpCircle } from "lucide-react";
  4 | import { getAuth } from "firebase/auth";
  5 | import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
  6 | import { app } from "../firebaseConfig";
  7 | import LinearProgress from '@mui/material/LinearProgress';
  8 | import YourBadgesSection from "../assets/badges";
  9 | 
 10 | 
 11 | export default function HomePage() {
 12 |   const navigate = useNavigate();
 13 |   const [hovered, setHovered] = useState(null);
 14 |   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 15 |   const [reportedItems, setReportedItems] = useState([]);
 16 |   const [foundItems, setFoundItems] = useState([]);
 17 |   const [loading, setLoading] = useState(true);
 18 |   const [error, setError] = useState(null);
 19 |   const [userId, setUserId] = useState(null);
 20 | 
 21 |   const auth = getAuth(app);
 22 |   const db = getFirestore(app);
 23 | 
 24 | const [isDarkMode, setIsDarkMode] = useState(() => {
 25 |   const storedTheme = localStorage.getItem("darkMode");
 26 |   return storedTheme ? storedTheme === "true" : false;
 27 | });
 28 | useEffect(() => {
 29 |   localStorage.setItem("darkMode", isDarkMode);
 30 | }, [isDarkMode]);
 31 |   useEffect(() => {
 32 |     const fetchReports = async () => {
 33 |       try {
 34 |         const user = auth.currentUser;
 35 |         if (!user) {
 36 |           navigate("/login");
 37 |           return;
 38 |         }
 39 |         setUserId(user.uid);
 40 |         const lostQuery = query(collection(db, "reportedItems"), where("userId", "==", user.uid));
 41 |         const lostSnapshot = await getDocs(lostQuery);
 42 |         const lostData = lostSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
 43 | 
 44 |         const foundQuery = query(collection(db, "foundItems"), where("userId", "==", user.uid));
 45 |         const foundSnapshot = await getDocs(foundQuery);
 46 |         const foundData = foundSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
 47 | 
 48 |         setReportedItems(lostData);
 49 |         setFoundItems(foundData);
 50 |       } catch (err) {
 51 |         setError("Failed to fetch reported items");
 52 |         console.error(err);
 53 |       } finally {
 54 |         setLoading(false);
 55 |       }
 56 |     };
 57 | 
 58 |     fetchReports();
 59 |   }, [navigate, auth, db]);
 60 | 
 61 |   const handleLogout = () => {
 62 |     auth.signOut();
 63 |     navigate("/login");
 64 |   };
 65 |   
 66 |   const darkClass = isDarkMode ? "dark" : "";
 67 | 
 68 |   return (
 69 |     <div className={`${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} min-h-screen p-4 transition-colors duration-500`}>
 70 |       <nav className={`hidden md:flex justify-between items-center ${isDarkMode ? "bg-gray-800" : "bg-white"} shadow-sm p-4 rounded-lg`}>
 71 |         <div className="flex gap-45 space-x-4">
 72 |           {[
 73 |             { name: "Report Lost", path: "/report" },
 74 |             { name: "Report Found", path: "/found" },
 75 |             { name: "Forum", path: "/forum" },
 76 |             { name: "Recent Posts", path: "/recent" },
 77 |             { name: "Map", path: "/map" },
 78 |             { name: "Your Profile", path: `/profile/${userId}` },
 79 |           ].map((item, index) => (
 80 |             <Link
 81 |               key={index}
 82 |               to={item.path}
 83 |               className={`text-lg transition-all duration-200 ${hovered === index ? "text-blue-500 scale-105" : isDarkMode ? "text-gray-300" : "text-gray-700"}`}
 84 |               onMouseEnter={() => setHovered(index)}
 85 |               onMouseLeave={() => setHovered(null)}
 86 |             >
 87 |               {item.name}
 88 |             </Link>
 89 |           ))}
 90 |         </div>
 91 |         <div className="flex gap-4 items-center">
 92 |           <button
 93 |             onClick={() => setIsDarkMode(!isDarkMode)}
 94 |             className={`p-2 rounded-full ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"} transition`}
 95 |           >
 96 |             {isDarkMode ? <Sun size={18} className="text-yellow-400" /> : <Moon size={18} className="text-gray-800" />}
 97 |           </button>
 98 |           <button
 99 |             onClick={handleLogout}
100 |             className="bg-red-500 px-6 py-2 rounded-md hover:bg-red-600 transition text-white font-medium"
101 |           >
102 |             Logout
103 |           </button>
104 |         </div>
105 |       </nav>
106 |       <button
107 |         className="md:hidden fixed top-4 left-4 bg-white shadow-md p-2 rounded-md z-50"
108 |         onClick={() => setIsSidebarOpen(true)}
109 |       >
110 |         <Menu size={24} className="text-blue-600" />
111 |       </button>
112 |       <div className={`fixed top-0 left-0 h-full w-64 ${isDarkMode ? "bg-gray-800 text-white" : "bg-white"} shadow-xl p-6 z-50 transition-transform ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"} md:hidden`}>
113 |         <button className="absolute top-4 right-4" onClick={() => setIsSidebarOpen(false)}>
114 |           <X size={24} className={`${isDarkMode ? "text-gray-300" : "text-gray-500"}`} />
115 |         </button>
116 |         <Link to="/Home" className={`mt-8 block text-4xl font-bold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>
117 |           ReturnIt
118 |         </Link>
119 |         <div className={`h-0.5 w-52 mt-5 ${isDarkMode ? "bg-blue-400" : "bg-blue-600"}`}></div>
120 |         <div className="mt-12 flex flex-col gap-4">
121 |           {[
122 |             { name: "Report Lost", path: "/report" },
123 |             { name: "Report Found", path: "/found" },
124 |             { name: "Forum", path: "/forum" },
125 |             { name: "Recent Posts", path: "/recent" },
126 |             { name: "Map", path: "/map" },
127 |             { name: "Your Profile", path: `/profile/${userId}` },
128 |           ].map((item, index) => (
129 |             <Link
130 |               key={index}
131 |               to={item.path}
132 |               onClick={() => setIsSidebarOpen(false)}
133 |               className={`text-lg hover:text-blue-500 p-2 rounded hover:bg-blue-100 transition ${isDarkMode ? "text-white hover:bg-gray-700" : "text-gray-700"}`}
134 |             >
135 |               {item.name}
136 |             </Link>
137 |           ))}
138 |         </div>
139 |         <div className="mt-6 flex gap-4 items-center">
140 |           <button
141 |             onClick={() => setIsDarkMode(!isDarkMode)}
142 |             className={`p-2 rounded-full ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"} transition`}
143 |           >
144 |             {isDarkMode ? <Sun size={18} className="text-yellow-400" /> : <Moon size={18} className="text-gray-800" />}
145 |           </button>
146 |           <button
147 |             onClick={handleLogout}
148 |             className="w-full bg-red-500 px-4 py-2 rounded-md hover:bg-red-600 transition text-white font-medium"
149 |           >
150 |             Logout
151 |           </button>
152 |         </div>
153 |       </div>
154 |       <div className={`mt-16 transition-opacity ${isSidebarOpen ? "opacity-30" : "opacity-100"}`}>
155 |         <div className="max-w-7xl mx-auto">
156 |           <section className="mb-12">
157 |             <div className="flex justify-between items-center mb-6">
158 |               <h2 className="text-2xl font-bold">Your Lost Items</h2>
159 |               <Link to="/report" className="text-blue-500 hover:text-blue-700 font-medium">
160 |                 + Report New Item
161 |               </Link>
162 |             </div>
163 |             {loading ? (
164 |               <LinearProgress color="primary" />
165 |             ) : (
166 |               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
167 |                 {reportedItems.length > 0 ? (
168 |                   reportedItems.map((item) => (
169 |                     <div key={item.id} className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"} rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300`}>
170 |                       {item.imageUrl && (
171 |                         <div className="h-48 overflow-hidden">
172 |                           <img src={item.imageUrl} alt={item.category} className="w-full h-full object-cover" />
173 |                         </div>
174 |                       )}
175 |                       <div className="p-5">
176 |                         <div className="flex justify-between items-start">
177 |                           <h3 className="text-xl font-semibold mb-2">{item.category}</h3>
178 |                           <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Lost</span>
179 |                         </div>
180 |                         <p className="text-sm">{item.description}</p>
181 |                       </div>
182 |                     </div>
183 |                   ))
184 |                 ) : (
185 |                   <div className={`col-span-full p-8 rounded-xl shadow-sm text-center ${isDarkMode ? "bg-gray-800 text-gray-300" : "bg-white text-gray-500"}`}>
186 |                     <p className="mb-4">No lost items reported yet</p>
187 |                     <Link to="/report" className="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
188 |                       Report Lost Item
189 |                     </Link>
190 |                   </div>
191 |                 )}
192 |               </div>
193 |             )}
194 |           </section>
195 |           <section className="mb-12">
196 |             <div className="flex justify-between items-center mb-6">
197 |               <h2 className="text-2xl font-bold">Your Found Items</h2>
198 |               <Link to="/found" className="text-blue-500 hover:text-blue-700 font-medium">
199 |                 + Report Found Item
200 |               </Link>
201 |             </div>
202 |             {loading ? (
203 |               <LinearProgress color="primary" />
204 |             ) : (
205 |               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
206 |                 {foundItems.length > 0 ? (
207 |                   foundItems.map((item) => (
208 |                     <div key={item.id} className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"} rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300`}>
209 |                       {item.imageUrl && (
210 |                         <div className="h-48 overflow-hidden">
211 |                           <img src={item.imageUrl} alt={item.category} className="w-full h-full object-cover" />
212 |                         </div>
213 |                       )}
214 |                       <div className="p-5">
215 |                         <div className="flex justify-between items-start">
216 |                           <h3 className="text-xl font-semibold mb-2">{item.category}</h3>
217 |                           <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Found</span>
218 |                         </div>
219 |                         <p className="text-sm">{item.description}</p>
220 |                       </div>
221 |                     </div>
222 |                   ))
223 |                 ) : (
224 |                   <div className={`col-span-full p-8 rounded-xl shadow-sm text-center ${isDarkMode ? "bg-gray-800 text-gray-300" : "bg-white text-gray-500"}`}>
225 |                     <p className="mb-4">No found items reported yet</p>
226 |                     <Link to="/found" className="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">
227 |                       Report Found Item
228 |                     </Link>
229 |                   </div>
230 |                 )}
231 |               </div>
232 |             )}
233 |           </section>
234 |           <section className="mb-12">
235 |             <h2 className="text-2xl font-bold mb-6">Your Badges</h2>
236 |                 <div className={`p-8 rounded-xl shadow-sm text-center ${isDarkMode ? "bg-gray-800 text-gray-300" : "bg-white text-gray-600"}`}>
237 |                 <YourBadgesSection
238 |                       isDarkMode={isDarkMode}
239 |                       reportedItems={reportedItems}
240 |                       foundItems={foundItems}
241 |                     />
242 |                 </div>
243 |           </section>
244 |         </div>
245 |       </div>
246 |     </div>
247 |   );
248 | }
249 | 


--------------------------------------------------------------------------------
/client/src/pages/Profile.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { FaUserEdit } from "react-icons/fa";
  3 | import { Menu, X, Moon, Sun } from "lucide-react";
  4 | import { Link, useNavigate } from "react-router-dom";
  5 | import axios from "axios";
  6 | import { getAuth, onAuthStateChanged } from "firebase/auth";
  7 | import AccountCircleIcon from '@mui/icons-material/AccountCircle';
  8 | import Spinner from '../components/spin';
  9 | import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
 10 | import { app } from "../firebaseConfig";
 11 | 
 12 | export default function ProfilePage() {
 13 |   const [user, setUser] = useState(null);
 14 |   const [userId, setUserId] = useState(null);
 15 |   const [error, setError] = useState(null);
 16 |   const [loading, setLoading] = useState(true);
 17 |   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 18 |   const [hovered, setHovered] = useState(null);
 19 |   const [reportedItems, setReportedItems] = useState([]);
 20 |   const [foundItems, setFoundItems] = useState([]);
 21 |   const [isDarkMode, setIsDarkMode] = useState(() => {
 22 |     const storedTheme = localStorage.getItem("darkMode");
 23 |     return storedTheme ? storedTheme === "true" : false;
 24 |   });
 25 | 
 26 |   const navigate = useNavigate();
 27 |   const auth = getAuth(app);
 28 |   const db = getFirestore(app);
 29 | 
 30 |   useEffect(() => {
 31 |     localStorage.setItem("darkMode", isDarkMode);
 32 |   }, [isDarkMode]);
 33 | 
 34 |   useEffect(() => {
 35 |     const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
 36 |       if (currentUser) {
 37 |         setUserId(currentUser.uid);
 38 |         fetchUserProfile(currentUser.uid);
 39 |         fetchReports(currentUser.uid);
 40 |       } else {
 41 |         setError("User not authenticated. Please log in.");
 42 |         setLoading(false);
 43 |       }
 44 |     });
 45 | 
 46 |     return () => unsubscribe();
 47 |   }, [navigate, auth]);
 48 | 
 49 |   const fetchUserProfile = async (id) => {
 50 |     try {
 51 |       const response = await axios.get(`https://los-n-found.onrender.com/api/profile/${id}`);
 52 |       setUser(response.data);
 53 |       setError(null);
 54 |     } catch (error) {
 55 |       console.error("Error fetching profile:", error);
 56 |       setError("Failed to load profile. Please try again later.");
 57 |     } finally {
 58 |       setLoading(false);
 59 |     }
 60 |   };
 61 | 
 62 |   const fetchReports = async (userId) => {
 63 |     try {
 64 |       const lostQuery = query(collection(db, "reportedItems"), where("userId", "==", userId));
 65 |       const lostSnapshot = await getDocs(lostQuery);
 66 |       const lostData = lostSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
 67 | 
 68 |       const foundQuery = query(collection(db, "foundItems"), where("userId", "==", userId));
 69 |       const foundSnapshot = await getDocs(foundQuery);
 70 |       const foundData = foundSnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }));
 71 | 
 72 |       setReportedItems(lostData);
 73 |       setFoundItems(foundData);
 74 |     } catch (err) {
 75 |       console.error("Failed to fetch reported items", err);
 76 |     }
 77 |   };
 78 | 
 79 |   const handleLogout = () => {
 80 |     auth.signOut();
 81 |     navigate("/login");
 82 |   };
 83 | 
 84 |   if (loading) {
 85 |     return (
 86 |       <div className={`flex justify-center items-center min-h-screen ${isDarkMode ? "bg-gray-900" : "bg-blue-50"}`}>
 87 |         <Spinner size="lg" color={isDarkMode ? "blue" : "blue"} />
 88 |       </div>
 89 |     );
 90 |   }
 91 | 
 92 |   if (error) {
 93 |     return (
 94 |       <div className={`flex justify-center items-center min-h-screen ${isDarkMode ? "bg-gray-900" : "bg-blue-50"}`}>
 95 |         <p className="text-red-500">{error}</p>
 96 |       </div>
 97 |     );
 98 |   }
 99 | 
100 |   if (!user) {
101 |     return (
102 |       <div className={`flex justify-center items-center min-h-screen ${isDarkMode ? "bg-gray-900" : "bg-blue-50"}`}>
103 |         <p className={`${isDarkMode ? "text-white" : "text-blue-600"}`}>No profile data found.</p>
104 |       </div>
105 |     );
106 |   }
107 | 
108 |   return (
109 |     <div className={`${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} min-h-screen p-4 transition-colors duration-500`}>
110 |       {/* Desktop Navigation */}
111 |       <nav className={`hidden md:flex justify-between items-center ${isDarkMode ? "bg-gray-800" : "bg-white"} shadow-sm p-4 rounded-lg`}>
112 |         <div className="flex items-center space-x-19">
113 |           <Link to="/Home" className={`text-2xl font-bold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>
114 |             ReturnIt
115 |           </Link>
116 |           <div className="flex gap-45">
117 |             {[
118 |               { name: "Report Lost", path: "/report" },
119 |               { name: "Report Found", path: "/found" },
120 |               { name: "Forum", path: "/forum" },
121 |               { name: "Recent Posts", path: "/recent" },
122 |               { name: "Map", path: "/map" },
123 |             ].map((item, index) => (
124 |               <Link
125 |                 key={index}
126 |                 to={item.path}
127 |                 className={`text-lg transition-all duration-200 ${hovered === index ? "text-blue-500 scale-105" : isDarkMode ? "text-gray-300" : "text-gray-700"}`}
128 |                 onMouseEnter={() => setHovered(index)}
129 |                 onMouseLeave={() => setHovered(null)}
130 |               >
131 |                 {item.name}
132 |               </Link>
133 |             ))}
134 |           </div>
135 |         </div>
136 |         <div className="flex gap-4 items-center">
137 |           <button
138 |             onClick={() => setIsDarkMode(!isDarkMode)}
139 |             className={`p-2 rounded-full ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"} transition`}
140 |           >
141 |             {isDarkMode ? <Sun size={18} className="text-yellow-400" /> : <Moon size={18} className="text-gray-800" />}
142 |           </button>
143 |           <button
144 |             onClick={handleLogout}
145 |             className="bg-red-500 px-4 py-2 rounded-md hover:bg-red-600 transition text-white font-medium"
146 |           >
147 |             Logout
148 |           </button>
149 |         </div>
150 |       </nav>
151 | 
152 |       {/* Mobile Sidebar Toggle */}
153 |       <div className="md:hidden fixed top-8 left-4 z-50 flex items-center space-x-2">
154 |         <button
155 |           className="bg-white shadow-md p-2 rounded-md"
156 |           onClick={() => setIsSidebarOpen(true)}
157 |         >
158 |           <Menu size={24} className="text-blue-600" />
159 |         </button>
160 |         <Link to="/Home" className={`text-3xl font-bold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>
161 |           ReturnIt
162 |         </Link>
163 |       </div>
164 | 
165 |       {/* Mobile Sidebar */}
166 |       <div className={`fixed top-0 left-0 h-full w-64 ${isDarkMode ? "bg-gray-800 text-white" : "bg-white"} shadow-xl p-6 z-50 transition-transform ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"} md:hidden`}>
167 |         <button className="absolute top-4 right-4" onClick={() => setIsSidebarOpen(false)}>
168 |           <X size={24} className={`${isDarkMode ? "text-gray-300" : "text-gray-500"}`} />
169 |         </button>
170 |         <Link to="/Home" className={`mt-8 block text-4xl font-bold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>
171 |           ReturnIt
172 |         </Link>
173 |         <div className={`h-0.5 w-52 mt-5 ${isDarkMode ? "bg-blue-400" : "bg-blue-600"}`}></div>
174 |         <div className="mt-12 flex flex-col gap-4">
175 |           {[
176 |             { name: "Report Lost", path: "/report" },
177 |             { name: "Report Found", path: "/found" },
178 |             { name: "Forum", path: "/forum" },
179 |             { name: "Recent Posts", path: "/recent" },
180 |             { name: "Map", path: "/map" },
181 |           ].map((item, index) => (
182 |             <Link
183 |               key={index}
184 |               to={item.path}
185 |               onClick={() => setIsSidebarOpen(false)}
186 |               className={`text-lg hover:text-blue-500 p-2 rounded hover:bg-blue-100 transition ${isDarkMode ? "text-white hover:bg-gray-700" : "text-gray-700"}`}
187 |             >
188 |               {item.name}
189 |             </Link>
190 |           ))}
191 |         </div>
192 |         <div className="mt-6 flex gap-4 items-center">
193 |           <button
194 |             onClick={() => setIsDarkMode(!isDarkMode)}
195 |             className={`p-2 rounded-full ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"} transition`}
196 |           >
197 |             {isDarkMode ? <Sun size={18} className="text-yellow-400" /> : <Moon size={18} className="text-gray-800" />}
198 |           </button>
199 |           <button
200 |             onClick={handleLogout}
201 |             className="w-full bg-red-500 px-4 py-2 rounded-md hover:bg-red-600 transition text-white font-medium"
202 |           >
203 |             Logout
204 |           </button>
205 |         </div>
206 |       </div>
207 | 
208 |       {/* Main Content */}
209 |       <div className={`mt-26 transition-opacity ${isSidebarOpen ? "opacity-30" : "opacity-100"}`}>
210 |         <div className="max-w-4xl mx-auto">
211 |           <div className={`${isDarkMode ? "bg-gray-800 text-white shadow-lg" : "bg-white text-gray-800 shadow-lg"} rounded-xl overflow-hidden`}>
212 |             <div className={`${isDarkMode ? "bg-gradient-to-r from-blue-600 to-blue-700" : "bg-gradient-to-r from-blue-500 to-blue-600"} h-32`}></div>
213 | 
214 |             <div className="px-6 pb-6">
215 |               <div className="flex flex-col sm:flex-row items-start sm:items-center -mt-16">
216 |                 <div className={`${isDarkMode ? "bg-gray-700" : "bg-white"} p-1 rounded-full shadow-md`}>
217 |                   {user.profileImage ? (
218 |                     <img
219 |                       src={user.profileImage}
220 |                       alt="Profile"
221 |                       className="w-24 h-24 rounded-full object-cover"
222 |                     />
223 |                   ) : (
224 |                     <AccountCircleIcon style={{ fontSize: 96, color: isDarkMode ? '#64b5f6' : '#1e88e5' }} />
225 |                   )}
226 |                 </div>
227 | 
228 |                 <div className="mt-4 sm:mt-0 sm:ml-6">
229 |                   <h2 className={`text-2xl font-bold ${isDarkMode ? "text-white" : "text-gray-800"}`}>{user.name || "No name"}</h2>
230 |                   <div className="flex items-center mt-2">
231 |                     <span className={`${isDarkMode ? "bg-blue-900 text-blue-300" : "bg-blue-100 text-blue-600"} text-xs px-2 py-1 rounded-full`}>
232 |                       {user.email || "Not provided"}
233 |                     </span>
234 |                   </div>
235 |                 </div>
236 |               </div>
237 | 
238 |               <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
239 |                 <div className={`${isDarkMode ? "bg-gray-700 text-white" : "bg-blue-50 text-gray-800"} p-4 rounded-lg`}>
240 |                   <h3 className={`text-sm font-medium uppercase tracking-wider ${isDarkMode ? "text-blue-300" : "text-blue-600"}`}>Phone</h3>
241 |                   <p className="mt-1 text-lg font-semibold">
242 |                     {user.phone || "Not provided"}
243 |                   </p>
244 |                 </div>
245 | 
246 |                 <div className={`${isDarkMode ? "bg-gray-700 text-white" : "bg-blue-50 text-gray-800"} p-4 rounded-lg`}>
247 |                   <h3 className={`text-sm font-medium uppercase tracking-wider ${isDarkMode ? "text-blue-300" : "text-blue-600"}`}>Reports Made</h3>
248 |                   <p className="mt-1 text-lg font-semibold">
249 |                     {reportedItems.length || 0} items reported
250 |                   </p>
251 |                 </div>
252 | 
253 |                 <div className={`${isDarkMode ? "bg-gray-700 text-white" : "bg-blue-50 text-gray-800"} p-4 rounded-lg`}>
254 |                   <h3 className={`text-sm font-medium uppercase tracking-wider ${isDarkMode ? "text-blue-300" : "text-blue-600"}`}>Items Found</h3>
255 |                   <p className="mt-1 text-lg font-semibold">
256 |                     {foundItems.length || 0} items found
257 |                   </p>
258 |                 </div>
259 |               </div>
260 | 
261 |               <Link to="/update" className="block mt-8">
262 |                 <button className={`${isDarkMode ? "bg-blue-700 hover:bg-blue-600 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"} w-full font-medium py-3 px-4 rounded-lg transition flex items-center justify-center space-x-2`}>
263 |                   <FaUserEdit />
264 |                   <span>Edit Profile</span>
265 |                 </button>
266 |               </Link>
267 |             </div>
268 |           </div>
269 |         </div>
270 |       </div>
271 |     </div>
272 |   );
273 | }


--------------------------------------------------------------------------------
/client/src/pages/UpdateProfile.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import axios from "axios";
  3 | import { getAuth, onAuthStateChanged } from "firebase/auth";
  4 | import { useNavigate } from "react-router-dom";
  5 | import AccountCircleIcon from '@mui/icons-material/AccountCircle';
  6 | import { FaArrowLeft } from "react-icons/fa";
  7 | import { toast } from 'react-hot-toast';
  8 | 
  9 | export default function UpdateProfile() {
 10 |   const [userId, setUserId] = useState(null);
 11 |   const [initialData, setInitialData] = useState(null);
 12 |   const [formData, setFormData] = useState({
 13 |     name: "",
 14 |     email: "",
 15 |     phone: "",
 16 |     profileImage: "",
 17 |   });
 18 |   const [imageFile, setImageFile] = useState(null);
 19 |   const [loading, setLoading] = useState(false);
 20 |   const [error, setError] = useState(null);
 21 |   const [success, setSuccess] = useState(null);
 22 |   const [isDarkMode] = useState(() => {
 23 |     return localStorage.getItem("darkMode") === "true";
 24 |   });
 25 | 
 26 |   const navigate = useNavigate();
 27 | 
 28 |   useEffect(() => {
 29 |     const auth = getAuth();
 30 |     const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
 31 |       if (currentUser) {
 32 |         setUserId(currentUser.uid);
 33 |         fetchUserProfile(currentUser.uid);
 34 |       }
 35 |     });
 36 | 
 37 |     return () => unsubscribe();
 38 |   }, []);
 39 | 
 40 |   const fetchUserProfile = async (id) => {
 41 |     try {
 42 |       const response = await axios.get(`https://los-n-found.onrender.com/api/profile/${id}`);
 43 |       setInitialData(response.data);
 44 |       setFormData({
 45 |         name: response.data.name || "",
 46 |         email: response.data.email || "",
 47 |         phone: response.data.phone || "",
 48 |         profileImage: response.data.profileImage || "",
 49 |       });
 50 |     } catch (error) {
 51 |       console.error("Error fetching profile:", error);
 52 |       setError("Failed to load profile data");
 53 |     }
 54 |   };
 55 | 
 56 |   const handleChange = (e) => {
 57 |     setFormData({ ...formData, [e.target.name]: e.target.value });
 58 |   };
 59 | 
 60 |   const handleImageChange = (e) => {
 61 |     if (e.target.files && e.target.files[0]) {
 62 |       const file = e.target.files[0];
 63 |       if (file.size > 5 * 1024 * 1024) { 
 64 |         setError("Image size should be less than 5MB");
 65 |         return;
 66 |       }
 67 |       
 68 |       setImageFile(file);
 69 |       setError(null);
 70 |       const reader = new FileReader();
 71 |       reader.onload = (event) => {
 72 |         setFormData(prev => ({ ...prev, profileImage: event.target.result }));
 73 |       };
 74 |       reader.readAsDataURL(file);
 75 |     }
 76 |   };
 77 | 
 78 |   const handleSubmit = async (e) => {
 79 |     e.preventDefault();
 80 |     setLoading(true);
 81 |     setError(null);
 82 |     setSuccess(null);
 83 | 
 84 |     if (!formData.name.trim()) {
 85 |       setError("Name is required");
 86 |       setLoading(false);
 87 |       return;
 88 |     }
 89 | 
 90 |     if (!formData.email.trim()) {
 91 |       setError("Email is required");
 92 |       setLoading(false);
 93 |       return;
 94 |     }
 95 | 
 96 |     if (initialData && 
 97 |         formData.name === initialData.name &&
 98 |         formData.email === initialData.email &&
 99 |         formData.phone === initialData.phone &&
100 |         !imageFile) {
101 |       setLoading(false);
102 |       setSuccess("No changes detected");
103 |       setTimeout(() => navigate("/profile"), 1500);
104 |       return;
105 |     }
106 | 
107 |     let imageUrl = formData.profileImage;
108 | 
109 |     if (imageFile) {
110 |       const formDataImage = new FormData();
111 |       formDataImage.append("image", imageFile); 
112 | 
113 |       try {
114 |         const uploadResponse = await fetch("https://los-n-found.onrender.com/api/cloudinary/upload", {
115 |           method: "POST",
116 |           body: formDataImage,
117 |         });
118 | 
119 |         const uploadData = await uploadResponse.json();
120 |         if (uploadResponse.ok) {
121 |           imageUrl = uploadData.imageUrl;
122 |         } else {
123 |           throw new Error("Image upload failed.");
124 |         }
125 |       } catch (error) {
126 |         setError("Image upload failed. Please try again.");
127 |         setLoading(false);
128 |         return;
129 |       }
130 |     }
131 | 
132 |     try {
133 |       const updatePayload = {
134 |         name: formData.name,
135 |         phone: formData.phone,
136 |         profileImage: imageUrl,
137 |       };
138 |       if (initialData?.email !== formData.email) {
139 |         updatePayload.email = formData.email;
140 |       }
141 | 
142 |       const response = await axios.put(
143 |         
144 |         `https://los-n-found.onrender.com/api/update/${userId}`,
145 |         updatePayload
146 |       );
147 | 
148 |       setSuccess("Profile updated successfully!");
149 |       toast.success("Profile updated successfully!");
150 |       setTimeout(() => navigate(`/profile/${userId}`), 1500);
151 |     } catch (error) {
152 |       console.error("Error updating profile:", error);
153 |       setError(error.response?.data?.error || 
154 |                error.response?.data?.details || 
155 |                "Failed to update profile!");
156 |                toast.error(errorMessage);
157 |     } finally {
158 |       setLoading(false);
159 |     }
160 |   };
161 | 
162 |   const darkClass = isDarkMode ? "dark" : "";
163 | 
164 |   return (
165 |     <div className={`${darkClass} min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} p-4 md:p-6`}>
166 |       <div className="max-w-4xl mx-auto">
167 |         <div className="flex justify-between items-center mb-4 md:mb-8">
168 |           <button
169 |             onClick={() => navigate(-1)}
170 |             className={`flex items-center ${isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-800"} transition`}
171 |           >
172 |             <FaArrowLeft className="mr-2" />
173 |             <span className="hidden sm:inline">Back</span>
174 |           </button>
175 |           <h1 className={`text-xl md:text-2xl font-bold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>ReturnIt</h1>
176 |         </div>
177 | 
178 |         <div className={`${isDarkMode ? "bg-gray-800 text-white shadow-lg" : "bg-white text-gray-800 shadow-lg"} rounded-xl overflow-hidden`}>
179 |           <div className={`${isDarkMode ? "bg-gradient-to-r from-blue-600 to-blue-700" : "bg-gradient-to-r from-blue-500 to-blue-600"} h-16 md:h-32`}></div>
180 | 
181 |           <div className="px-4 md:px-6 pb-6">
182 |             <div className="flex flex-col items-center relative">
183 |               <div className="relative -mt-12 md:-mt-20 p-1 rounded-full shadow-md" style={{ backgroundColor: isDarkMode ? '#4a5568' : 'white' }}>
184 |                 {formData.profileImage ? (
185 |                   <img
186 |                     src={formData.profileImage}
187 |                     alt="Profile"
188 |                     className="w-24 h-24 md:w-32 md:h-32 rounded-full object-cover border-2 border-white"
189 |                   />
190 |                 ) : (
191 |                   <AccountCircleIcon 
192 |                     style={{ 
193 |                       fontSize: 96, 
194 |                       color: isDarkMode ? '#64b5f6' : '#1e88e5' 
195 |                     }} 
196 |                     className="md:text-[128px]" 
197 |                   />
198 |                 )}
199 |               </div>
200 |               <h2 className={`text-xl md:text-2xl font-bold mt-4 md:mt-6 mb-4 md:mb-6 ${isDarkMode ? "text-white" : "text-gray-800"}`}>
201 |                 Update Profile
202 |               </h2>
203 |             </div>
204 | 
205 |             <form onSubmit={handleSubmit} className="space-y-4 md:space-y-6">
206 |               <div className="mt-2">
207 |                 <label className={`block text-sm font-medium mb-1 ${isDarkMode ? "text-blue-300" : "text-blue-600"}`}>
208 |                   Change Profile Picture
209 |                 </label>
210 |                 <input
211 |                   type="file"
212 |                   accept="image/*"
213 |                   className={`block w-full text-sm text-gray-500 file:mr-2 file:py-1 md:file:py-2 file:px-3 md:file:px-4 file:rounded-md file:border-0 file:text-xs md:file:text-sm file:font-semibold ${isDarkMode ? "file:bg-blue-800 file:text-blue-200" : "file:bg-blue-50 file:text-blue-700"} hover:file:${isDarkMode ? "bg-blue-700" : "bg-blue-100"}`}
214 |                   onChange={handleImageChange}
215 |                 />
216 |                 <p className={`mt-1 text-xs ${isDarkMode ? "text-gray-400" : "text-gray-500"}`}>
217 |                   JPG, PNG or GIF (Max 5MB)
218 |                 </p>
219 |               </div>
220 | 
221 |               {error && (
222 |                 <div className={`p-3 md:p-4 rounded-lg ${isDarkMode ? "bg-red-900 text-red-200" : "bg-red-50 text-red-700"}`}>
223 |                   <p className="text-sm md:text-base">{error}</p>
224 |                 </div>
225 |               )}
226 | 
227 |               {success && (
228 |                 <div className={`p-3 md:p-4 rounded-lg ${isDarkMode ? "bg-green-900 text-green-200" : "bg-green-50 text-green-700"}`}>
229 |                   <p className="text-sm md:text-base">{success}</p>
230 |                 </div>
231 |               )}
232 | 
233 |               <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6">
234 |                 <div>
235 |                   <label className={`block text-sm font-medium mb-1 ${isDarkMode ? "text-blue-300" : "text-blue-600"}`}>
236 |                     Full Name
237 |                   </label>
238 |                   <input
239 |                     name="name"
240 |                     type="text"
241 |                     className={`w-full p-2 md:p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300 text-gray-800"}`}
242 |                     value={formData.name}
243 |                     onChange={handleChange}
244 |                     required
245 |                   />
246 |                 </div>
247 | 
248 |                 <div>
249 |                   <label className={`block text-sm font-medium mb-1 ${isDarkMode ? "text-blue-300" : "text-blue-600"}`}>
250 |                     Email
251 |                     {initialData?.email && formData.email !== initialData.email && (
252 |                       <span className="ml-2 text-xs text-yellow-600">(Changing email will require verification)</span>
253 |                     )}
254 |                   </label>
255 |                   <input
256 |                     name="email"
257 |                     type="email"
258 |                     className={`w-full p-2 md:p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300 text-gray-800"}`}
259 |                     value={formData.email}
260 |                     onChange={handleChange}
261 |                     required
262 |                   />
263 |                 </div>
264 | 
265 |                 <div>
266 |                   <label className={`block text-sm font-medium mb-1 ${isDarkMode ? "text-blue-300" : "text-blue-600"}`}>
267 |                     Phone Number
268 |                   </label>
269 |                   <input
270 |                     name="phone"
271 |                     type="tel"
272 |                     className={`w-full p-2 md:p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${isDarkMode ? "border-gray-600 bg-gray-700 text-white" : "border-gray-300 text-gray-800"}`}
273 |                     value={formData.phone}
274 |                     onChange={handleChange}
275 |                     placeholder="+1 (123) 456-7890"
276 |                   />
277 |                 </div>
278 |               </div>
279 | 
280 |               <div className="pt-2 md:pt-4">
281 |                 <button
282 |                   type="submit"
283 |                   className={`w-full ${isDarkMode ? "bg-blue-700 hover:bg-blue-600 text-white" : "bg-blue-600 hover:bg-blue-700 text-white"} font-medium py-2 md:py-3 px-4 rounded-lg transition flex items-center justify-center`}
284 |                   disabled={loading}
285 |                 >
286 |                   {loading ? (
287 |                     <span className="flex items-center">
288 |                       <svg className="animate-spin -ml-1 mr-3 h-4 w-4 md:h-5 md:w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
289 |                         <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
290 |                         <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
291 |                       </svg>
292 |                       Saving...
293 |                     </span>
294 |                   ) : "Save Changes"}
295 |                 </button>
296 |               </div>
297 |             </form>
298 |           </div>
299 |         </div>
300 |       </div>
301 |     </div>
302 |   );
303 | }


--------------------------------------------------------------------------------
/client/src/pages/Forum.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import { useNavigate } from "react-router-dom";
  3 | import { FaSearch, FaReply, FaThumbsUp, FaRegComment, FaUserCircle } from "react-icons/fa";
  4 | 
  5 | const ForumPage = () => {
  6 |   const navigate = useNavigate();
  7 |   const [searchQuery, setSearchQuery] = useState("");
  8 |   const [activePost, setActivePost] = useState(null);
  9 |   const [newComment, setNewComment] = useState("");
 10 |   const [isDarkMode, setIsDarkMode] = useState(false);
 11 |   const [discussions, setDiscussions] = useState([
 12 |     { 
 13 |       id: 1, 
 14 |       title: "How to find a lost item?", 
 15 |       author: "Kevin", 
 16 |       date: "2 hours ago",
 17 |       content: "I recently lost my wallet on campus. What are the best steps to take to increase my chances of finding it? Should I report to campus security first or check the lost and found offices?",
 18 |       replies: 5,
 19 |       likes: 12,
 20 |       comments: [
 21 |         { id: 1, author: "Sarah", content: "Always check with campus security first!", date: "1 hour ago", likes: 3 },
 22 |         { id: 2, author: "Mike", content: "Post on the university Facebook groups too.", date: "45 mins ago", likes: 5 }
 23 |       ]
 24 |     },
 25 |     { 
 26 |       id: 2, 
 27 |       title: "Best ways to secure your valuables", 
 28 |       author: "Gopika", 
 29 |       date: "1 day ago",
 30 |       content: "With the increasing number of lost item reports, I thought we could share tips on how to better secure our belongings. What methods have worked for you?",
 31 |       replies: 3,
 32 |       likes: 8,
 33 |       comments: [
 34 |         { id: 1, author: "Alex", content: "I use Tile trackers for my keys and wallet.", date: "22 hours ago", likes: 2 }
 35 |       ]
 36 |     },
 37 |     { 
 38 |       id: 3, 
 39 |       title: "Lost my phone, what should I do?", 
 40 |       author: "Cinol", 
 41 |       date: "3 days ago",
 42 |       content: "I think I left my phone in the library yesterday. I've tried calling it but it goes straight to voicemail. What other steps can I take?",
 43 |       replies: 7,
 44 |       likes: 15,
 45 |       comments: [
 46 |         { id: 1, author: "Taylor", content: "Use Find My Device if you have Android!", date: "3 days ago", likes: 7 },
 47 |         { id: 2, author: "Jordan", content: "Check with all library desks - sometimes staff collect lost items.", date: "2 days ago", likes: 4 }
 48 |       ]
 49 |     },
 50 |     { 
 51 |       id: 4, 
 52 |       title: "Anyone found a black wallet near downtown?", 
 53 |       author: "Xavier", 
 54 |       date: "5 days ago",
 55 |       content: "Lost my black leather wallet near the downtown campus yesterday. Contains my student ID and some cash. Reward offered for its return!",
 56 |       replies: 2,
 57 |       likes: 5,
 58 |       comments: [
 59 |         { id: 1, author: "Riley", content: "I saw a post about a found wallet at the coffee shop near downtown.", date: "4 days ago", likes: 1 }
 60 |       ]
 61 |     },
 62 |   ]);
 63 | 
 64 |   useEffect(() => {
 65 |     const storedTheme = localStorage.getItem("darkMode");
 66 |     setIsDarkMode(storedTheme === "true");
 67 |   }, []);
 68 | 
 69 |   const filteredDiscussions = discussions.filter(discussion =>
 70 |     discussion.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
 71 |     discussion.content.toLowerCase().includes(searchQuery.toLowerCase())
 72 |   );
 73 | 
 74 |   const handleAddComment = () => {
 75 |     if (!newComment.trim()) return;
 76 |     
 77 |     const updatedDiscussions = discussions.map(discussion => {
 78 |       if (discussion.id === activePost) {
 79 |         return {
 80 |           ...discussion,
 81 |           comments: [
 82 |             ...discussion.comments,
 83 |             {
 84 |               id: Math.max(...discussion.comments.map(c => c.id)) + 1,
 85 |               author: "You",
 86 |               content: newComment,
 87 |               date: "Just now",
 88 |               likes: 0
 89 |             }
 90 |           ],
 91 |           replies: discussion.replies + 1
 92 |         };
 93 |       }
 94 |       return discussion;
 95 |     });
 96 | 
 97 |     setDiscussions(updatedDiscussions);
 98 |     setNewComment("");
 99 |   };
100 | 
101 |   const handleLike = (postId, commentId = null) => {
102 |     const updatedDiscussions = discussions.map(discussion => {
103 |       if (discussion.id === postId) {
104 |         if (commentId === null) {
105 |           return { ...discussion, likes: discussion.likes + 1 };
106 |         } else {
107 |           return {
108 |             ...discussion,
109 |             comments: discussion.comments.map(comment => {
110 |               if (comment.id === commentId) {
111 |                 return { ...comment, likes: comment.likes + 1 };
112 |               }
113 |               return comment;
114 |             })
115 |           };
116 |         }
117 |       }
118 |       return discussion;
119 |     });
120 | 
121 |     setDiscussions(updatedDiscussions);
122 |   };
123 | 
124 |   const darkClass = isDarkMode ? "dark" : "";
125 | 
126 |   return (
127 |     <div className={`min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} p-4 transition-colors duration-500`}>
128 |       <div className="max-w-4xl mx-auto">
129 |         <div className="flex justify-between items-center mb-6">
130 |           <h1 className={`text-3xl font-bold ${isDarkMode ? "text-white" : "text-gray-800"}`}>Community Forum</h1>
131 |           <button
132 |             onClick={() => navigate("/Home")}
133 |             className={`${isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-800"} font-medium`}
134 |           >
135 |             ← Back to Home
136 |           </button>
137 |         </div>
138 |         <div className={`rounded-xl shadow-md p-6 mb-6 ${isDarkMode ? "bg-gray-800" : "bg-white"}`}>
139 |           <div className="flex flex-col md:flex-row gap-4">
140 |             <div className="relative flex-grow">
141 |               <FaSearch className={`absolute left-3 top-3 ${isDarkMode ? "text-gray-400" : "text-gray-400"}`} />
142 |               <input
143 |                 type="text"
144 |                 placeholder="Search discussions..."
145 |                 className={`w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
146 |                   isDarkMode ? "bg-gray-700 border-gray-600 text-white placeholder-gray-400" : "border-gray-300"
147 |                 }`}
148 |                 value={searchQuery}
149 |                 onChange={(e) => setSearchQuery(e.target.value)}
150 |               />
151 |             </div>
152 |             <button 
153 |               className={`px-6 py-2 rounded-lg hover:bg-blue-700 transition font-medium whitespace-nowrap ${
154 |                 isDarkMode ? "bg-blue-700 text-white" : "bg-blue-600 text-white"
155 |               }`}
156 |               onClick={() => setActivePost("new")}
157 |             >
158 |               Create New Post
159 |             </button>
160 |           </div>
161 |         </div>
162 |         {!activePost && (
163 |           <div className="space-y-4">
164 |             {filteredDiscussions.length > 0 ? (
165 |               filteredDiscussions.map((discussion) => (
166 |                 <div 
167 |                   key={discussion.id} 
168 |                   className={`rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow cursor-pointer ${
169 |                     isDarkMode ? "bg-gray-800" : "bg-white"
170 |                   }`}
171 |                   onClick={() => setActivePost(discussion.id)}
172 |                 >
173 |                   <div className="p-6">
174 |                     <div className="flex justify-between items-start">
175 |                       <h2 className={`text-xl font-semibold ${isDarkMode ? "text-white" : "text-gray-800"}`}>{discussion.title}</h2>
176 |                     </div>
177 |                     <p className={`mt-2 line-clamp-2 ${isDarkMode ? "text-gray-300" : "text-gray-600"}`}>{discussion.content}</p>
178 |                     <div className={`flex justify-between items-center mt-4 text-sm ${
179 |                       isDarkMode ? "text-gray-400" : "text-gray-500"
180 |                     }`}>
181 |                       <div className="flex items-center">
182 |                         <FaUserCircle className="mr-1" />
183 |                         <span>{discussion.author}</span>
184 |                         <span className="mx-2">•</span>
185 |                         <span>{discussion.date}</span>
186 |                       </div>
187 |                       <div className="flex items-center space-x-4">
188 |                         <div className="flex items-center">
189 |                           <FaThumbsUp className="mr-1 text-blue-500" />
190 |                           <span>{discussion.likes}</span>
191 |                         </div>
192 |                         <div className="flex items-center">
193 |                           <FaRegComment className="mr-1 text-blue-500" />
194 |                           <span>{discussion.replies}</span>
195 |                         </div>
196 |                       </div>
197 |                     </div>
198 |                   </div>
199 |                 </div>
200 |               ))
201 |             ) : (
202 |               <div className={`rounded-xl shadow-md p-8 text-center ${
203 |                 isDarkMode ? "bg-gray-800 text-gray-300" : "bg-white text-gray-500"
204 |               }`}>
205 |                 <p>No discussions found matching your search.</p>
206 |               </div>
207 |             )}
208 |           </div>
209 |         )}
210 |         {activePost && activePost !== "new" && (
211 |           <div className={`rounded-xl shadow-md overflow-hidden ${
212 |             isDarkMode ? "bg-gray-800" : "bg-white"
213 |           }`}>
214 |             {discussions.filter(d => d.id === activePost).map(discussion => (
215 |               <div key={discussion.id}>
216 |                 <div className="p-6">
217 |                   <button 
218 |                     onClick={() => setActivePost(null)}
219 |                     className={`font-medium mb-4 ${
220 |                       isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-800"
221 |                     }`}
222 |                   >
223 |                     ← Back to discussions
224 |                   </button>
225 |                   
226 |                   <h1 className={`text-2xl font-bold mb-2 ${
227 |                     isDarkMode ? "text-white" : "text-gray-800"
228 |                   }`}>{discussion.title}</h1>
229 |                   <div className={`flex items-center text-sm mb-4 ${
230 |                     isDarkMode ? "text-gray-400" : "text-gray-500"
231 |                   }`}>
232 |                     <FaUserCircle className="mr-1" />
233 |                     <span className="font-medium">{discussion.author}</span>
234 |                     <span className="mx-2">•</span>
235 |                     <span>{discussion.date}</span>
236 |                   </div>
237 |                   
238 |                   <p className={`mb-6 whitespace-pre-line ${
239 |                     isDarkMode ? "text-gray-300" : "text-gray-700"
240 |                   }`}>{discussion.content}</p>
241 |                   
242 |                   <div className="flex items-center space-x-4 mb-6">
243 |                     <button 
244 |                       className={`flex items-center ${
245 |                         isDarkMode ? "text-gray-400 hover:text-blue-400" : "text-gray-600 hover:text-blue-600"
246 |                       }`}
247 |                       onClick={() => handleLike(discussion.id)}
248 |                     >
249 |                       <FaThumbsUp className="mr-1" />
250 |                       <span>Like ({discussion.likes})</span>
251 |                     </button>
252 |                     <div className={`flex items-center ${
253 |                       isDarkMode ? "text-gray-400" : "text-gray-600"
254 |                     }`}>
255 |                       <FaRegComment className="mr-1" />
256 |                       <span>{discussion.replies} {discussion.replies === 1 ? 'reply' : 'replies'}</span>
257 |                     </div>
258 |                   </div>
259 |                   
260 |                   <div className="space-y-4">
261 |                     {discussion.comments.map(comment => (
262 |                       <div key={comment.id} className={`pl-4 border-l-2 ${
263 |                         isDarkMode ? "border-blue-700" : "border-blue-200"
264 |                       }`}>
265 |                         <div className={`flex items-center text-sm mb-1 ${
266 |                           isDarkMode ? "text-gray-400" : "text-gray-500"
267 |                         }`}>
268 |                           <FaUserCircle className="mr-1" />
269 |                           <span className="font-medium">{comment.author}</span>
270 |                           <span className="mx-2">•</span>
271 |                           <span>{comment.date}</span>
272 |                         </div>
273 |                         <p className={`mb-2 whitespace-pre-line ${
274 |                           isDarkMode ? "text-gray-300" : "text-gray-700"
275 |                         }`}>{comment.content}</p>
276 |                         <button 
277 |                           className={`flex items-center text-xs ${
278 |                             isDarkMode ? "text-gray-500 hover:text-blue-400" : "text-gray-500 hover:text-blue-600"
279 |                           }`}
280 |                           onClick={() => handleLike(discussion.id, comment.id)}
281 |                         >
282 |                           <FaThumbsUp className="mr-1" />
283 |                           <span>Like ({comment.likes})</span>
284 |                         </button>
285 |                       </div>
286 |                     ))}
287 |                   </div>
288 |                   
289 |                   <div className="mt-6">
290 |                     <h3 className={`text-lg font-medium mb-3 ${
291 |                       isDarkMode ? "text-white" : "text-gray-800"
292 |                     }`}>Add your comment</h3>
293 |                     <textarea
294 |                       className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent mb-2 ${
295 |                         isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "border-gray-300"
296 |                       }`}
297 |                       rows="3"
298 |                       placeholder="Write your reply..."
299 |                       value={newComment}
300 |                       onChange={(e) => setNewComment(e.target.value)}
301 |                     />
302 |                     <button
303 |                       className={`px-4 py-2 rounded-lg hover:bg-blue-700 transition font-medium ${
304 |                         isDarkMode ? "bg-blue-700 text-white" : "bg-blue-600 text-white"
305 |                       }`}
306 |                       onClick={handleAddComment}
307 |                     >
308 |                       <FaReply className="inline mr-1" /> Post Comment
309 |                     </button>
310 |                   </div>
311 |                 </div>
312 |               </div>
313 |             ))}
314 |           </div>
315 |         )}
316 |         {activePost === "new" && (
317 |           <div className={`rounded-xl shadow-md overflow-hidden p-6 ${
318 |             isDarkMode ? "bg-gray-800" : "bg-white"
319 |           }`}>
320 |             <button 
321 |               onClick={() => setActivePost(null)}
322 |               className={`font-medium mb-4 ${
323 |                 isDarkMode ? "text-blue-400 hover:text-blue-300" : "text-blue-600 hover:text-blue-800"
324 |               }`}
325 |             >
326 |               ← Back to discussions
327 |             </button>
328 |             
329 |             <h2 className={`text-xl font-bold mb-4 ${
330 |               isDarkMode ? "text-white" : "text-gray-800"
331 |             }`}>Create New Post</h2>
332 |             
333 |             <div className="space-y-4">
334 |               <div>
335 |                 <label className={`block font-medium mb-1 ${
336 |                   isDarkMode ? "text-gray-300" : "text-gray-700"
337 |                 }`}>Title</label>
338 |                 <input
339 |                   type="text"
340 |                   className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
341 |                     isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "border-gray-300"
342 |                   }`}
343 |                   placeholder="What's your question or topic?"
344 |                 />
345 |               </div>
346 |               
347 |               <div>
348 |                 <label className={`block font-medium mb-1 ${
349 |                   isDarkMode ? "text-gray-300" : "text-gray-700"
350 |                 }`}>Content</label>
351 |                 <textarea
352 |                   className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
353 |                     isDarkMode ? "bg-gray-700 border-gray-600 text-white" : "border-gray-300"
354 |                   }`}
355 |                   rows="5"
356 |                   placeholder="Provide details about what you want to discuss..."
357 |                 />
358 |               </div>
359 |               
360 |               <div className="flex justify-end space-x-3">
361 |                 <button
362 |                   onClick={() => setActivePost(null)}
363 |                   className={`px-4 py-2 border rounded-lg hover:bg-gray-700 transition ${
364 |                     isDarkMode ? "border-gray-600 text-white" : "border-gray-300 hover:bg-gray-50"
365 |                   }`}
366 |                 >
367 |                   Cancel
368 |                 </button>
369 |                 <button
370 |                   className={`px-6 py-2 rounded-lg hover:bg-blue-700 transition font-medium ${
371 |                     isDarkMode ? "bg-blue-700 text-white" : "bg-blue-600 text-white"
372 |                   }`}
373 |                 >
374 |                   Post Discussion
375 |                 </button>
376 |               </div>
377 |             </div>
378 |           </div>
379 |         )}
380 |       </div>
381 |     </div>
382 |   );
383 | };
384 | 
385 | export default ForumPage;


--------------------------------------------------------------------------------
/client/src/pages/Adminpage.jsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from "react";
  2 | import { useNavigate } from "react-router-dom";
  3 | import { Menu, X, Moon, Sun, Trash2, MoreVertical, Edit } from "lucide-react";
  4 | import { getAuth } from "firebase/auth";
  5 | import { app } from "../firebaseConfig";
  6 | 
  7 | export default function AdminPage() {
  8 |   const navigate = useNavigate();
  9 |   const auth = getAuth(app);
 10 |   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 11 |   const [hovered, setHovered] = useState(null);
 12 |   const [reportedItems, setReportedItems] = useState([
 13 |     {
 14 |       id: "1",
 15 |       category: "Wallet",
 16 |       description: "Black leather wallet with two credit cards, driver's license, and college ID. Slight scratch on the front corner.",
 17 |       imageUrl: "https://media.istockphoto.com/id/180756294/photo/wallet.jpg?s=2048x2048&w=is&k=20&c=LsLYeSiy8Kk8XGXCmWBD-vukSQWJMNVbhIyVghEEXxM=&auto=format&fit=crop",
 18 |       location: "Main Campus - Building A",
 19 |       status: "Lost"
 20 |     },
 21 |     {
 22 |       id: "2",
 23 |       category: "Laptop",
 24 |       description: "13-inch MacBook Pro in a silver case with a 'Code Like a Pro' sticker on the back. Slight dent on the top left corner.",
 25 |       imageUrl: "https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=500&auto=format&fit=crop",
 26 |       location: "Library - 2nd Floor",
 27 |       status: "Lost"
 28 |     },
 29 |     {
 30 |       id: "3",
 31 |       category: "Keys",
 32 |       description: "Bunch of 5 metal keys on a ring with a blue plastic tag labeled 'B-Block 23'.",
 33 |       imageUrl: "https://images.pexels.com/photos/842528/pexels-photo-842528.jpeg?w=500&auto=format&fit=crop",
 34 |       location: "Cafeteria",
 35 |       status: "Lost"
 36 |     },
 37 |     {
 38 |       id: "4",
 39 |       category: "Phone",
 40 |       description: "iPhone 12 with a matte black case. The lock screen has a dog wallpaper. May have low battery.",
 41 |       imageUrl: "https://media.istockphoto.com/id/1197063359/photo/woman-using-apple-iphone-11-pro-smartphone.jpg?s=2048x2048&w=is&k=20&c=Q8nQ4II_VJlaukvKvCl4kix6LUGczuFTQAmr9jEOs6s=&auto=format&fit=crop",
 42 |       location: "Sports Complex",
 43 |       status: "Lost"
 44 |     },
 45 |     {
 46 |       id: "9",
 47 |       category: "Watch",
 48 |       description: "Black Fossil smartwatch with a leather strap and a cracked screen protector.",
 49 |       imageUrl: "https://images.unsplash.com/photo-1523170335258-f5ed11844a49?w=500&auto=format&fit=crop",
 50 |       location: "Men's Restroom - Admin Block",
 51 |       status: "Lost"
 52 |     },
 53 |     {
 54 |       id: "11",
 55 |       category: "Headphones",
 56 |       description: "Black wireless Sony headphones in a soft case with minor scratches on the left ear cup.",
 57 |       imageUrl: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&auto=format&fit=crop",
 58 |       location: "Music Room",
 59 |       status: "Lost"
 60 |     },
 61 |     {
 62 |       id: "12",
 63 |       category: "Calculator",
 64 |       description: "Casio FX-991ES PLUS scientific calculator with name written on the back in black ink.",
 65 |       imageUrl: "https://images.unsplash.com/photo-1587145820266-a5951ee6f620?w=500&auto=format&fit=crop",
 66 |       location: "Exam Hall 2",
 67 |       status: "Lost"
 68 |     }
 69 |   ]);
 70 | 
 71 |   const [foundItems, setFoundItems] = useState([
 72 |     {
 73 |       id: "5",
 74 |       category: "Backpack",
 75 |       description: "Blue Jansport backpack containing 3 textbooks, a pencil pouch, and a laptop charger.",
 76 |       imageUrl: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=500&auto=format&fit=crop",
 77 |       location: "Lecture Hall B",
 78 |       status: "Found"
 79 |     },
 80 |     {
 81 |       id: "6",
 82 |       category: "Glasses",
 83 |       description: "Black rectangular prescription glasses inside a brown leather case with initials 'RK'.",
 84 |       imageUrl: "https://images.unsplash.com/photo-1511499767150-a48a237f0083?w=500&auto=format&fit=crop",
 85 |       location: "Computer Lab",
 86 |       status: "Found"
 87 |     },
 88 |     {
 89 |       id: "7",
 90 |       category: "Notebook",
 91 |       description: "Spiral-bound notebook with 'Organic Chemistry' written on the first page. Green plastic cover.",
 92 |       imageUrl: "https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=500&auto=format&fit=crop",
 93 |       location: "Chemistry Department",
 94 |       status: "Found"
 95 |     },
 96 |     {
 97 |       id: "8",
 98 |       category: "Water Bottle",
 99 |       description: "Silver stainless steel bottle with several cartoon character stickers. Slightly dented at the bottom.",
100 |       imageUrl: "https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=500&auto=format&fit=crop",
101 |       location: "Gym",
102 |       status: "Found"
103 |     },
104 |     {
105 |       id: "14",
106 |       category: "Earphones",
107 |       description: "White Apple earphones found tangled on a bench. Minor dirt on wires.",
108 |       imageUrl: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df?w=500&auto=format&fit=crop",
109 |       location: "Bus Stop",
110 |       status: "Found"
111 |     },
112 |     {
113 |       id: "15",
114 |       category: "Cap",
115 |       description: "Black Nike cap with white logo, slightly faded. Found on a stair railing.",
116 |       imageUrl: "https://images.unsplash.com/photo-1575428652377-a2d80e2277fc?w=500&auto=format&fit=crop",
117 |       location: "Stadium Entrance",
118 |       status: "Found"
119 |     },
120 |     {
121 |       id: "16",
122 |       category: "Umbrella",
123 |       description: "Blue foldable umbrella with a wooden handle. Wet and placed on a bench near the entrance.",
124 |       imageUrl: "https://media.istockphoto.com/id/866721702/photo/blue-umbrella.jpg?s=2048x2048&w=is&k=20&c=YWt75t-vdqUoAXyRVnE6l5mVEpQ1UfSZlsnyOzEEDNs=&auto=format&fit=crop",
125 |       location: "Library Gate",
126 |       status: "Found"
127 |     },
128 |     {
129 |       id: "17",
130 |       category: "Power Bank",
131 |       description: "Red Mi power bank with 20000mAh capacity. Found unplugged near a charging station.",
132 |       imageUrl: "https://media.istockphoto.com/id/1159079715/photo/blue-external-battery.jpg?s=2048x2048&w=is&k=20&c=igmq2ibBU-isQPN732s1IuOjQ5MX8lW4N8zD4HLy_9g=&auto=format&fit=crop",
133 |       location: "Student Lounge",
134 |       status: "Found"
135 |     }
136 |   ]);
137 | 
138 |   const [users, setUsers] = useState([
139 |     {
140 |       id: "u1",
141 |       username: "Kevin Jose",
142 |       email: "kevin@gmail.com"
143 |     },
144 |     {
145 |       id: "u2",
146 |       username: "Gopika",
147 |       email: "Gopzz@gmail.com"
148 |     },
149 |     {
150 |       id: "u3",
151 |       username: "Cinol Samson",
152 |       email: "cinol@gmail.com"
153 |     },
154 |     {
155 |       id: "u4",
156 |       username: "Ardra",
157 |       email: "Ardra@gmail.com"
158 |     },
159 |     {
160 |       id: "u5",
161 |       username: "Shwetha",
162 |       email: "shwetha@gmail.com"
163 |     },
164 |     {
165 |       id: "u6",
166 |       username: "Pranav",
167 |       email: "pranav@gmail.com"
168 |     },
169 |      {
170 |       id: "u7",
171 |       username: "Srinanth",
172 |       email: "srinanth@gmail.com"
173 |     }
174 |   ]);
175 | 
176 |   const [isDarkMode, setIsDarkMode] = useState(() => {
177 |     const storedTheme = localStorage.getItem("darkMode");
178 |     return storedTheme ? storedTheme === "true" : false;
179 |   });
180 | 
181 |   const [activeMenu, setActiveMenu] = useState(null);
182 | 
183 |   useEffect(() => {
184 |     localStorage.setItem("darkMode", isDarkMode);
185 |   }, [isDarkMode]);
186 | 
187 |   const handleDeleteItem = (collectionName, id, setItems) => {
188 |     if (!window.confirm("Are you sure you want to delete this item?")) return;
189 |     setItems(prev => prev.filter(item => item.id !== id));
190 |     alert("Item deleted successfully");
191 |   };
192 | 
193 |   const handleDeleteUser = (userId) => {
194 |     if (!window.confirm("Are you sure you want to delete this user?")) return;
195 |     setUsers(prev => prev.filter(user => user.id !== userId));
196 |     setActiveMenu(null);
197 |     alert("User deleted successfully");
198 |   };
199 | 
200 |   const handleLogout = () => {
201 |     auth.signOut();
202 |     navigate("/login");
203 |   };
204 | 
205 |   const toggleMenu = (userId) => {
206 |     setActiveMenu(activeMenu === userId ? null : userId);
207 |   };
208 | 
209 |   return (
210 |     <div className={`${isDarkMode ? "bg-gray-900 text-white" : "bg-gradient-to-b from-blue-50 to-white text-gray-900"} min-h-screen p-4 transition-colors duration-500`}>
211 |       <nav className={`hidden md:flex justify-between items-center ${isDarkMode ? "bg-gray-800" : "bg-white"} shadow-sm p-4 rounded-lg`}>
212 |         <div className="flex gap-45 space-x-4">
213 |           {[
214 |             { name: "Admin Dashboard", path: "/admin" },
215 |             { name: "Lost Items", path: "#lost" },
216 |             { name: "Found Items", path: "#found" },
217 |             { name: "User Management", path: "#users" },
218 |           ].map((item, index) => (
219 |             <a
220 |               key={index}
221 |               href={item.path}
222 |               className={`text-lg transition-all duration-200 ${hovered === index ? "text-blue-500 scale-105" : isDarkMode ? "text-gray-300" : "text-gray-700"}`}
223 |               onMouseEnter={() => setHovered(index)}
224 |               onMouseLeave={() => setHovered(null)}
225 |             >
226 |               {item.name}
227 |             </a>
228 |           ))}
229 |         </div>
230 |         <div className="flex gap-4 items-center">
231 |           <button
232 |             onClick={() => setIsDarkMode(!isDarkMode)}
233 |             className={`p-2 rounded-full ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"} transition`}
234 |           >
235 |             {isDarkMode ? <Sun size={18} className="text-yellow-400" /> : <Moon size={18} className="text-gray-800" />}
236 |           </button>
237 |           <button
238 |             onClick={handleLogout}
239 |             className="bg-red-500 px-6 py-2 rounded-md hover:bg-red-600 transition text-white font-medium"
240 |           >
241 |             Logout
242 |           </button>
243 |         </div>
244 |       </nav>
245 |       <button
246 |         className="md:hidden fixed top-4 left-4 bg-white shadow-md p-2 rounded-md z-50"
247 |         onClick={() => setIsSidebarOpen(true)}
248 |       >
249 |         <Menu size={24} className="text-blue-600" />
250 |       </button>
251 | 
252 |       <div className={`fixed top-0 left-0 h-full w-64 ${isDarkMode ? "bg-gray-800 text-white" : "bg-white"} shadow-xl p-6 z-50 transition-transform ${isSidebarOpen ? "translate-x-0" : "-translate-x-full"} md:hidden`}>
253 |         <button className="absolute top-4 right-4" onClick={() => setIsSidebarOpen(false)}>
254 |           <X size={24} className={`${isDarkMode ? "text-gray-300" : "text-gray-500"}`} />
255 |         </button>
256 |         <h1 className={`mt-8 block text-4xl font-bold ${isDarkMode ? "text-blue-400" : "text-blue-600"}`}>
257 |           Admin Panel
258 |         </h1>
259 |         <div className={`h-0.5 w-52 mt-5 ${isDarkMode ? "bg-blue-400" : "bg-blue-600"}`}></div>
260 |         <div className="mt-12 flex flex-col gap-4">
261 |           {[
262 |             { name: "Lost Items", path: "#lost" },
263 |             { name: "Found Items", path: "#found" },
264 |             { name: "User Management", path: "#users" },
265 |           ].map((item, index) => (
266 |             <a
267 |               key={index}
268 |               href={item.path}
269 |               onClick={() => setIsSidebarOpen(false)}
270 |               className={`text-lg hover:text-blue-500 p-2 rounded hover:bg-blue-100 transition ${isDarkMode ? "text-white hover:bg-gray-700" : "text-gray-700"}`}
271 |             >
272 |               {item.name}
273 |             </a>
274 |           ))}
275 |         </div>
276 |         <div className="mt-6 flex gap-4 items-center">
277 |           <button
278 |             onClick={() => setIsDarkMode(!isDarkMode)}
279 |             className={`p-2 rounded-full ${isDarkMode ? "bg-gray-700 hover:bg-gray-600" : "bg-gray-200 hover:bg-gray-300"} transition`}
280 |           >
281 |             {isDarkMode ? <Sun size={18} className="text-yellow-400" /> : <Moon size={18} className="text-gray-800" />}
282 |           </button>
283 |           <button
284 |             onClick={handleLogout}
285 |             className="w-full bg-red-500 px-4 py-2 rounded-md hover:bg-red-600 transition text-white font-medium"
286 |           >
287 |             Logout
288 |           </button>
289 |         </div>
290 |       </div>
291 | 
292 |       <div className={`mt-16 transition-opacity ${isSidebarOpen ? "opacity-30" : "opacity-100"}`}>
293 |         <div className="max-w-7xl mx-auto">
294 | 
295 |           <section id="lost" className="mb-12">
296 |             <h2 className="text-2xl font-bold mb-6">Lost Items</h2>
297 |             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
298 |               {reportedItems.map((item) => (
299 |                 <div key={item.id} className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"} rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300`}>
300 |                   {item.imageUrl && (
301 |                     <div className="h-48 overflow-hidden">
302 |                       <img src={item.imageUrl} alt={item.category} className="w-full h-full object-cover" />
303 |                     </div>
304 |                   )}
305 |                   <div className="p-5">
306 |                     <div className="flex justify-between items-start">
307 |                       <h3 className="text-xl font-semibold mb-2">{item.category}</h3>
308 |                       <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Lost</span>
309 |                     </div>
310 |                     <p className="text-sm mb-2">{item.description}</p>
311 |                     <p className="text-xs mb-3 text-gray-500">{item.location}</p>
312 |                     <button
313 |                       onClick={() => handleDeleteItem("reportedItems", item.id, setReportedItems)}
314 |                       className={`flex items-center gap-1 ${isDarkMode ? "text-red-400 hover:text-red-300" : "text-red-600 hover:text-red-800"} transition`}
315 |                     >
316 |                       <Trash2 size={16} /> Delete
317 |                     </button>
318 |                   </div>
319 |                 </div>
320 |               ))}
321 |             </div>
322 |           </section>
323 | 
324 |           <section id="found" className="mb-12">
325 |             <h2 className="text-2xl font-bold mb-6">Found Items</h2>
326 |             <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
327 |               {foundItems.map((item) => (
328 |                 <div key={item.id} className={`${isDarkMode ? "bg-gray-800 text-white" : "bg-white text-gray-800"} rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300`}>
329 |                   {item.imageUrl && (
330 |                     <div className="h-48 overflow-hidden">
331 |                       <img src={item.imageUrl} alt={item.category} className="w-full h-full object-cover" />
332 |                     </div>
333 |                   )}
334 |                   <div className="p-5">
335 |                     <div className="flex justify-between items-start">
336 |                       <h3 className="text-xl font-semibold mb-2">{item.category}</h3>
337 |                       <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Found</span>
338 |                     </div>
339 |                     <p className="text-sm mb-2">{item.description}</p>
340 |                     <p className="text-xs mb-3 text-gray-500">{item.location}</p>
341 |                     <button
342 |                       onClick={() => handleDeleteItem("foundItems", item.id, setFoundItems)}
343 |                       className={`flex items-center gap-1 ${isDarkMode ? "text-red-400 hover:text-red-300" : "text-red-600 hover:text-red-800"} transition`}
344 |                     >
345 |                       <Trash2 size={16} /> Delete
346 |                     </button>
347 |                   </div>
348 |                 </div>
349 |               ))}
350 |             </div>
351 |           </section>
352 | 
353 |           <section id="users" className="mb-12">
354 |             <h2 className="text-2xl font-bold mb-6">Registered Users</h2>
355 |             <div className={`overflow-x-auto rounded-xl shadow-sm ${isDarkMode ? "bg-gray-800" : "bg-white"}`}>
356 |               <table className="min-w-full divide-y divide-gray-200">
357 |                 <thead className={isDarkMode ? "bg-gray-700" : "bg-gray-50"}>
358 |                   <tr>
359 |                     <th scope="col" className={`px-6 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDarkMode ? "text-gray-300" : "text-gray-500"}`}>
360 |                       Username
361 |                     </th>
362 |                     <th scope="col" className={`px-6 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDarkMode ? "text-gray-300" : "text-gray-500"}`}>
363 |                       Email
364 |                     </th>
365 |                     <th scope="col" className={`px-6 py-3 text-left text-xs font-medium uppercase tracking-wider ${isDarkMode ? "text-gray-300" : "text-gray-500"}`}>
366 |                       User ID
367 |                     </th>
368 |                     <th scope="col" className={`px-6 py-3 text-right text-xs font-medium uppercase tracking-wider ${isDarkMode ? "text-gray-300" : "text-gray-500"}`}>
369 |                       Actions
370 |                     </th>
371 |                   </tr>
372 |                 </thead>
373 |                 <tbody className={`divide-y ${isDarkMode ? "divide-gray-700 bg-gray-800" : "divide-gray-200 bg-white"}`}>
374 |                   {users.map((user) => (
375 |                     <tr key={user.id} className={isDarkMode ? "hover:bg-gray-700" : "hover:bg-gray-50"}>
376 |                       <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
377 |                         {user.username}
378 |                       </td>
379 |                       <td className="px-6 py-4 whitespace-nowrap text-sm">
380 |                         {user.email}
381 |                       </td>
382 |                       <td className="px-6 py-4 whitespace-nowrap font-mono text-xs">
383 |                         {user.id}
384 |                       </td>
385 |                       <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium relative">
386 |                         <button 
387 |                           onClick={() => toggleMenu(user.id)}
388 |                           className={`p-1 rounded-full ${isDarkMode ? "hover:bg-gray-600" : "hover:bg-gray-200"}`}
389 |                         >
390 |                           <MoreVertical size={16} />
391 |                         </button>
392 |                         
393 |                         {activeMenu === user.id && (
394 |                           <div className={`absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md shadow-lg ${isDarkMode ? "bg-gray-700" : "bg-white"} ring-1 ring-black ring-opacity-5 focus:outline-none`}>
395 |                             <div className="py-1">
396 |                               <button
397 |                                 className={`flex items-center w-full px-4 py-2 text-sm ${isDarkMode ? "text-gray-300 hover:bg-gray-600" : "text-gray-700 hover:bg-gray-100"}`}
398 |                               >
399 |                                 <Edit size={14} className="mr-2" /> Edit
400 |                               </button>
401 |                               <button
402 |                                 onClick={() => handleDeleteUser(user.id)}
403 |                                 className={`flex items-center w-full px-4 py-2 text-sm ${isDarkMode ? "text-red-400 hover:bg-gray-600" : "text-red-600 hover:bg-gray-100"}`}
404 |                               >
405 |                                 <Trash2 size={14} className="mr-2" /> Delete
406 |                               </button>
407 |                             </div>
408 |                           </div>
409 |                         )}
410 |                       </td>
411 |                     </tr>
412 |                   ))}
413 |                 </tbody>
414 |               </table>
415 |             </div>
416 |           </section>
417 |         </div>
418 |       </div>
419 |     </div>
420 |   );
421 | }


--------------------------------------------------------------------------------