fix navigation

fix: update placeholder and slide image paths to use assets directory
2025-05-28 09:52:10 +08:00 · 2025-05-28 08:48:41 +08:00
18 changed files with 35 additions and 63 deletions
--- a/.env
+++ b/.env
@ -1,6 +1 @@
-# .env
-VITE_API_URL=http://localhost:8000
-
-# You can also create environment-specific files:
-# .env.development
-# .env.production
+VITE_API_URL=http://127.0.0.1:8000
--- a/public/assets/hero.jpg
+++ b/public/assets/hero.jpg
--- a/public/assets/ital.png
+++ b/public/assets/ital.png
--- a/public/assets/placeholder.svg
+++ b/public/assets/placeholder.svg
--- a/public/assets/slide1.avif
+++ b/public/assets/slide1.avif
--- a/public/assets/slide2.avif
+++ b/public/assets/slide2.avif
--- a/public/assets/slide3.avif
+++ b/public/assets/slide3.avif
--- a/public/assets/slide4.avif
+++ b/public/assets/slide4.avif
--- a/src/components/admin/Setting.tsx
+++ b/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 */}
--- a/src/components/admin/migrant/form-steps/PhotosStep.tsx
+++ b/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"
                    />
--- a/src/components/admin/users/UserCreate.tsx
+++ b/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">
--- a/src/components/home/HeroSection.tsx
+++ b/src/components/home/HeroSection.tsx
@ -41,25 +41,13 @@ export default function Home() {
    }
    fetchData()
  }, [])
-
  const backgroundImages = [
-    {
-      src: `${import.meta.env.BASE_URL}slide1.avif`,
-      alt: "Italian countryside landscape",
-    },
-    {
-      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",
-    },
-  ]
+    { src: `${import.meta.env.BASE_URL}assets/slide1.avif`, alt: "Italian countryside landscape" },
+    { src: `${import.meta.env.BASE_URL}assets/slide2.avif`, alt: "Vintage Italian architecture" },
+    { 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" },
+  ];
+  

  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>
--- a/src/components/home/MigrantProfileComponent.tsx
+++ b/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>
--- a/src/components/home/SearchResults.tsx
+++ b/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"
--- a/src/components/ui/ProfileSettings.tsx
+++ b/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"
                          />
--- a/src/components/ui/animated-image.tsx
+++ b/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}
--- a/src/services/apiService.ts
+++ b/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);
@ -45,6 +49,7 @@ class ApiService {
    });
  }
  
+  

  async register(params: { name: string; email: string; password: string }) {
    return this.api.post("/api/register", params).then((res) => res.data);
--- a/vite.config.ts
+++ b/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/, ""),
      },
    },
  },
Author	SHA1	Message	Date
mark	a6923e8c3c	fix navigation	2025-05-28 09:52:10 +08:00
mark	4d7a9492bc	fix: update placeholder and slide image paths to use assets directory	2025-05-28 08:48:41 +08:00