fixed backend routing

backend/holy_backend/urls.py

@@ -4,15 +4,14 @@ from drf_spectacular.views import SpectacularAPIView, SpectacularRedocView, Spec
 from rest_framework.authtoken.views import obtain_auth_token
 from django.conf import settings
 from django.conf.urls.static import static
-
 from django.views.static import serve
-import re
 import os
 
-admin_path = os.environ.get('ADMIN_URL', 'admin/')
+# Ensure the admin path is clean and always ends with a slash for Django
+admin_url = os.environ.get('ADMIN_URL', 'admin').strip('/')
 
 urlpatterns = [
-    path(admin_path, admin.site.urls),
+    path(f'{admin_url}/', admin.site.urls),
     path('api/', include('api.urls')),
     path('api/token/', obtain_auth_token, name='api_token'),
     path('api-auth/', include('rest_framework.urls')),

docker-compose.yml

@@ -20,9 +20,9 @@ services:
     labels:
       - "traefik.enable=true"
       - "traefik.docker.network=narl"
-      # Higher priority for specific backend paths
+      # Explicitly capture specific paths for the backend
       - "traefik.http.routers.holy-backend.priority=20"
-      - "traefik.http.routers.holy-backend.rule=Host(`holy.narl.io`) && (PathPrefix(`/api`) || PathPrefix(`/admin`) || PathPrefix(`/static`) || PathPrefix(`/media`))"
+      - "traefik.http.routers.holy-backend.rule=Host(`holy.narl.io`) && (PathPrefix(`/api`)||PathPrefix(`/admin`)||PathPrefix(`/static`)||PathPrefix(`/media`))"
       - "traefik.http.routers.holy-backend.entrypoints=websecure"
       - "traefik.http.routers.holy-backend.tls.certresolver=https_resolver"
       - "traefik.http.services.holy-backend.loadbalancer.server.port=8000"
@@ -32,21 +32,19 @@ services:
     build:
       context: ./frontend
       args:
-        # Bake the API URL into the production build
         - VITE_API_URL=https://holy.narl.io/api/
     container_name: holy-frontend
     restart: unless-stopped
     networks:
       - narl
-    # In production, we don't mount volumes for code to ensure container integrity
     depends_on:
       - backend
     labels:
       - "traefik.enable=true"
       - "traefik.docker.network=narl"
-      # Lower priority acts as catch-all for the domain
+      # Frontend ONLY matches if it's NOT a backend path
       - "traefik.http.routers.holy-frontend.priority=10"
-      - "traefik.http.routers.holy-frontend.rule=Host(`holy.narl.io`)"
+      - "traefik.http.routers.holy-frontend.rule=Host(`holy.narl.io`) && ! (PathPrefix(`/api`)||PathPrefix(`/admin`)||PathPrefix(`/static`)||PathPrefix(`/media`))"
       - "traefik.http.routers.holy-frontend.entrypoints=websecure"
       - "traefik.http.routers.holy-frontend.tls.certresolver=https_resolver"
       - "traefik.http.services.holy-frontend.loadbalancer.server.port=80"

frontend/src/App.tsx

@@ -32,7 +32,7 @@ import ExpandMore from '@mui/icons-material/ExpandMore';
 import { getTheme, type CatppuccinTheme } from './theme';
 import api from './api';
 
-// Lazy load components for production performance
+// Code splitting
 const CategoryList = lazy(() => import('./pages/CategoryList'));
 const CategoryFlavors = lazy(() => import('./pages/categories/CategoryFlavors'));
 const FlavorDetail = lazy(() => import('./pages/flavors/FlavorDetail'));
@@ -87,7 +87,7 @@ const GlobalSearch = () => {
                 freeSolo
                 size="small"
                 options={options}
-                getOptionLabel={(option) => typeof option === 'string' ? option : option.name}
+                getOptionLabel={(option) => typeof option === 'string' ? option : (option.name || '')}
                 inputValue={query}
                 onInputChange={(_, newValue) => setQuery(typeof newValue === 'string' ? newValue : '')}
                 onChange={(_, newValue) => {
@@ -204,7 +204,7 @@ const App: React.FC = () => {
     <Box sx={{ width: 280 }} role="presentation">
       <Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 2 }}>
           <Avatar src={user?.avatar || undefined} sx={{ width: 40, height: 40, border: '2px solid', borderColor: 'primary.main' }}>
-              {user?.username && !user.avatar && user.username.charAt(0).toUpperCase()}
+              {user?.username ? user.username.charAt(0).toUpperCase() : '?'}
           </Avatar>
           <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
               <Link to="/" onClick={() => setDrawerOpen(false)} style={{ color: 'inherit', textDecoration: 'none' }}>Holy Flavors</Link>
@@ -326,7 +326,7 @@ const App: React.FC = () => {
                       <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
                         <IconButton color="inherit" onClick={(e) => setAnchorEl(e.currentTarget)} sx={{ ml: 1 }}>
                           <Avatar src={user.avatar || undefined} sx={{ width: 36, height: 36, border: '2px solid', borderColor: 'primary.main' }}>
-                              {user.username && !user.avatar && user.username.charAt(0).toUpperCase()}
+                              {user.username ? user.username.charAt(0).toUpperCase() : '?'}
                           </Avatar>
                         </IconButton>
                         <Menu
@@ -382,7 +382,6 @@ const App: React.FC = () => {
                     <Route path="/dashboard" element={<Dashboard />} />
                     <Route path="/settings" element={<Settings themeName={themeName} onThemeChange={handleThemeChange} />} />
                     <Route path="/login" element={<Login />} />
-                    {/* Fallback route for unknown paths */}
                     <Route path="*" element={<Box sx={{ p: 4, textAlign: 'center' }}><Typography variant="h5">404 - Page Not Found</Typography><Button component={Link} to="/" sx={{ mt: 2 }}>Back to Home</Button></Box>} />
                 </Routes>
             </Suspense>