fix navigation

.env

@@ -1,6 +1 @@
-# .env
+VITE_API_URL=http://127.0.0.1:8000
-VITE_API_URL=http://localhost:8000
-
-# You can also create environment-specific files:
-# .env.development
-# .env.production

src/components/admin/Setting.tsx

@@ -108,16 +108,9 @@ export default function UserCreate() {
         <main className="p-4 md:p-6">
           <div className="mb-6">
             <div className="flex items-center gap-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => navigate("/admin/dashboard")}
-                className="hover:bg-gray-800 text-gray-400 hover:text-white">
-                <ArrowLeft className="size-5" />
-              </Button>
               <h1 className="text-2xl md:text-3xl font-serif font-bold text-white">Account Settings</h1>
             </div>
-            <p className="text-gray-400 mt-2 ml-10">Manage your profile and security preferences</p>
+            <p className="text-gray-400 mt-2">Manage your profile and security preferences</p>
           </div>
 
           {/* Current user information card */}

src/components/admin/migrant/form-steps/PhotosStep.tsx

@@ -144,7 +144,7 @@ const PhotosStep: React.FC<PhotosStepProps> = ({
                 <Card key={`new-${index}`} className="overflow-hidden">
                   <div className="relative">
                     <img
-                      src={photoPreviews[index] || `${import.meta.env.BASE_URL}placeholder.svg`}
+                      src={photoPreviews[index] || `${import.meta.env.BASE_URL}assets/placeholder.svg`}
                       alt={`Preview ${index}`}
                       className="w-full h-48 object-cover"
                     />

src/components/admin/users/UserCreate.tsx

@@ -70,16 +70,9 @@ export default function UserCreate() {
         <main className="p-4 md:p-6">
           <div className="mb-6">
             <div className="flex items-center gap-2">
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                onClick={() => navigate("/admin/settings")} 
-                className="hover:bg-gray-800 text-gray-400 hover:text-white">
-                <ArrowLeft className="size-5" />
-              </Button>
               <h1 className="text-2xl md:text-3xl font-serif font-bold text-white">Create New User</h1>
             </div>
-            <p className="text-gray-400 mt-2 ml-10">Add a new administrator to the system</p>
+            <p className="text-gray-400 mt-2">Add a new administrator to the system</p>
           </div>
 
           <div className="max-w-10xl mx-auto">

src/components/home/HeroSection.tsx

@@ -41,25 +41,13 @@ export default function Home() {
     }
     fetchData()
   }, [])
-
   const backgroundImages = [
-    {
+    { src: `${import.meta.env.BASE_URL}assets/slide1.avif`, alt: "Italian countryside landscape" },
-      src: `${import.meta.env.BASE_URL}slide1.avif`,
+    { src: `${import.meta.env.BASE_URL}assets/slide2.avif`, alt: "Vintage Italian architecture" },
-      alt: "Italian countryside landscape",
+    { src: `${import.meta.env.BASE_URL}assets/slide3.avif`, alt: "Italian coastal town" },
-    },
+    { src: `${import.meta.env.BASE_URL}assets/slide4.avif`, alt: "Italian countryside with vineyards" },
-    {
+  ];
-      src: `${import.meta.env.BASE_URL}slide2.avif`,
+  
-      alt: "Vintage Italian architecture",
-    },
-    {
-      src: `${import.meta.env.BASE_URL}slide3.avif`,
-      alt: "Italian coastal town",
-    },
-    {
-      src: `${import.meta.env.BASE_URL}slide4.avif`,
-      alt: "Italian countryside with vineyards",
-    },
-  ]
 
   const galleryImages = [
     {
@@ -146,7 +134,7 @@ export default function Home() {
                 className={`absolute inset-0 transition-opacity duration-1000 ${index === currentSlide ? "opacity-100" : "opacity-0"
                   }`}
               >
-                <img src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`} alt={image.alt} className="w-full h-full object-cover" />
+                <img src={image.src || `${import.meta.env.BASE_URL}assets/placeholder.svg`} alt={image.alt} className="w-full h-full object-cover" />
                 <div className="absolute inset-0 bg-black/60" />
               </div>
             ))}
@@ -352,7 +340,7 @@ export default function Home() {
                         <div className="p-1">
                           <div className="overflow-hidden rounded-xl aspect-square">
                             <img
-                              src={image.src || `${import.meta.env.BASE_URL}placeholder.svg`}
+                              src={image.src || `${import.meta.env.BASE_URL}assets/placeholder.svg`}
                               alt={image.alt}
                               className="object-cover w-full h-full hover:scale-105 transition-transform duration-300"
                             />
@@ -433,22 +421,22 @@ export default function Home() {
                 >
                   Search Database
                 </Link>
-                <Link to="/contribute" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <Link to="#" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Contribute a Story
                 </Link>
-                <Link to="/gallery" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <Link to="/" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Photo Gallery
                 </Link>
                 <Link
-                  to="/research-help"
+                  to="/"
                   className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                 >
                   Research Help
                 </Link>
-                <Link to="/volunteer" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <Link to="/" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Volunteer
                 </Link>
-                <Link to="/donations" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <Link to="/" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Support Us
                 </Link>
               </nav>
@@ -458,22 +446,22 @@ export default function Home() {
             <div className="space-y-4">
               <h3 className="text-lg font-bold font-serif text-[#E8DCCA]">Resources</h3>
               <nav className="space-y-2">
-                <Link to="/faq" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <Link to="/" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   FAQ
                 </Link>
                 <Link
-                  to="/research-guides"
+                  to="/"
                   className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                 >
                   Research Guides
                 </Link>
                 <Link
-                  to="/historical-timeline"
+                  to="/"
                   className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors"
                 >
                   Historical Timeline
                 </Link>
-                <Link to="/partnerships" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <Link to="/" className="block text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Partnerships
                 </Link>
               </nav>
@@ -568,7 +556,7 @@ export default function Home() {
                 <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Accessibility
                 </a>
-                <a href="#" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
+                <a href="/login" className="text-sm text-gray-300 hover:text-[#E8DCCA] transition-colors">
                   Admin
                 </a>
               </nav>

src/components/home/MigrantProfileComponent.tsx

@@ -71,12 +71,12 @@ export default function MigrantProfile() {
                         ? profilePhoto.file_path.startsWith('http')
                           ? profilePhoto.file_path
                           : `${API_BASE_URL}${profilePhoto.file_path}`
-                        : `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`}
+                        : `${import.meta.env.BASE_URL}assets/placeholder.svg?height=600&width=450`}
                       alt={`${migrant.full_name || 'Migrant photo'}`}
                       className="aspect-[3/4] object-cover w-full"
                       onError={(e) => {
                         // Handle image loading errors by setting a fallback
-                        e.currentTarget.src = `${import.meta.env.BASE_URL}placeholder.svg?height=600&width=450`;
+                        e.currentTarget.src = `${import.meta.env.BASE_URL}assets/placeholder.svg?height=600&width=450`;
                       }}
                     />
                   </div>
@@ -189,12 +189,12 @@ export default function MigrantProfile() {
                                     ? photo.file_path.startsWith('http')
                                       ? photo.file_path
                                       : `${API_BASE_URL}${photo.file_path}`
-                                    : `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`}
+                                    : `${import.meta.env.BASE_URL}assets/placeholder.svg?height=400&width=600`}
                                   alt={photo.caption || "Migrant photo"}
                                   className="aspect-video object-cover w-full"
                                   onError={(e) => {
                                     // Handle image loading errors
-                                    e.currentTarget.src = `${import.meta.env.BASE_URL}placeholder.svg?height=400&width=600`;
+                                    e.currentTarget.src = `${import.meta.env.BASE_URL}assets/placeholder.svg?height=400&width=600`;
                                   }}
                                 />
                               </div>

src/components/home/SearchResults.tsx

@@ -75,7 +75,7 @@ export default function SearchResults() {
                           src={
                             migrant.profilePhoto
                               ? `${API_BASE_URL}${migrant.profilePhoto.file_path}`
-                              : `${import.meta.env.BASE_URL}placeholder.svg?height=300&width=300`
+                              : `${import.meta.env.BASE_URL}assets/placeholder.svg?height=300&width=300`
                           }
                           alt={migrant.full_name || "Unknown"}
                           className="w-full h-full object-cover object-center transition-transform hover:scale-105"

src/components/ui/ProfileSettings.tsx

@@ -255,7 +255,7 @@ export default function ProfileSettings() {
                       <div className="h-24 w-24 rounded-full bg-gray-200 overflow-hidden">
                         {profile.avatar ? (
                           <img
-                            src={profile.avatar || `${import.meta.env.BASE_URL}placeholder.svg`}
+                            src={profile.avatar || `${import.meta.env.BASE_URL}assets/placeholder.svg`}
                             alt="Profile"
                             className="h-full w-full object-cover"
                           />

src/components/ui/animated-image.tsx

@@ -32,7 +32,7 @@ export default function AnimatedImage({
       transition={{ duration: 0.5 }}
     >
       <img
-        src={src || `${import.meta.env.BASE_URL}placeholder.svg`}
+        src={src || `${import.meta.env.BASE_URL}assets/placeholder.svg`}
         alt={alt}
         width={!fill ? width : undefined}
         height={!fill ? height : undefined}

src/services/apiService.ts

@@ -37,6 +37,10 @@ class ApiService {
 
   // --- AUTH ---
   async login(params: { email: string; password: string }) {
+    // First get CSRF cookie
+    await this.api.get("/sanctum/csrf-cookie");
+  
+    // Then login
     return this.api.post("/api/login", params).then((res) => {
       console.log("Token:", res.data.token);
       localStorage.setItem("token", res.data.token);
@@ -46,6 +50,7 @@ class ApiService {
   }
   
   
+
   async register(params: { name: string; email: string; password: string }) {
     return this.api.post("/api/register", params).then((res) => res.data);
   }

vite.config.ts

@@ -3,8 +3,8 @@ import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
-// https://vite.dev/config/
 export default defineConfig({
+  base: '/',
   plugins: [react(), tailwindcss()],
   resolve: {
     alias: {
@@ -16,8 +16,6 @@ export default defineConfig({
       "/api": {
         target: "http://localhost:8000",
         changeOrigin: true,
-        // Don't rewrite the path since Laravel expects /api prefix
-        // rewrite: (path) => path.replace(/^\/api/, ""),
       },
     },
   },