Fix frontend config import path for production deployment

[Copilot]

Problem

Frontend modules import ../shared/config.js from frontend/utils.js. In production deployment, the site root is the frontend/ directory, so /shared/config.js is not served and the browser throws a 404 import error. This breaks execution of any module that depends on utils.js, including:

• Navigation loading (setActiveNav)
• Theme toggle functionality (initThemeToggle)
• Toast notifications (showToast)
• API calls (getApiBase)

Solution

This PR implements the minimal, low-risk fix by duplicating the shared config file into the frontend tree and updating the import path to use a same-directory relative path.

Changes Made

1. Added frontend/shared/config.js - Frontend-local copy of shared config constants with explanatory comments about the duplication and deployment constraints.

2. Updated frontend/utils.js import path - Changed from '../shared/config.js' to './shared/config.js' to reference the new local copy.

3. Added defensive DOM checks - Enhanced showToast() and initThemeToggle() functions to gracefully handle missing DOM elements instead of throwing errors.

4. Added sync notice to original config - Updated shared/config.js with comment noting the duplication to prevent drift.

Files Modified

// frontend/utils.js
- import { API_BASE_URL as DEFAULT_API_BASE_URL } from '../shared/config.js';
+ import { API_BASE_URL as DEFAULT_API_BASE_URL } from './shared/config.js';

Validation

• ✅ All ES module imports work correctly without 404 errors
• ✅ Theme toggle functionality verified working (see screenshot)
• ✅ Navigation loading confirmed functional
• ✅ Toast system works with defensive checks
• ✅ API base URL resolution unchanged

Screenshot showing the frontend login page working correctly with theme toggle functionality after the fix.

Risk Assessment

Very Low Risk - Only adds one file and changes one import path. No breaking changes to existing functionality. The original shared/config.js is preserved for any potential backend references.

Follow-up Opportunities

• Consider implementing a build step to consolidate config duplication
• Evaluate removing original /shared/config.js if backend doesn't require it
• Implement monorepo structure for better code organization

This pull request was created as a result of the following prompt from Copilot chat.

Summary

Frontend modules import ../shared/config.js from frontend/utils.js. In production deployment the site root is the frontend/ directory, so /shared/config.js is not served and the browser throws a 404 import error. This breaks execution of any module that depends on utils.js (nav loading, theme toggle, etc.).

Change requested: Duplicate the shared config file into the frontend tree (frontend/shared/config.js) and update the import path in frontend/utils.js to reference the new location via a same-directory relative path (./shared/config.js). This is the minimal, low-risk fix; later a build step or monorepo structure can consolidate duplication.

Scope of PR

1. Add new file: frontend/shared/config.js (copy of existing /shared/config.js constants)
2. Update frontend/utils.js import from '../shared/config.js' to './shared/config.js'
3. Add basic defensive checks (optional) for missing DOM nodes (initThemeToggle already has one but ensure toast container presence is safe)
4. Do NOT remove existing shared/config.js yet to avoid breaking any future backend references; just note duplication in comment.

Files to add

// Frontend-local copy of shared config.
// NOTE: This duplicates /shared/config.js because the deployed site root is the frontend/ folder
// and the browser cannot import files above that root. Keep these in sync until a build step
// or different deploy layout consolidates them.

export const API_BASE_URL = 'https://workshop-backend.joshburt.com.au/api';

export const ROLES = {
  ADMIN: 'admin',
  USER: 'user',
  TECH: 'tech',
};

export const THEMES = {
  LIGHT: 'light',
  DARK: 'dark',
  HIGH_CONTRAST: 'contrast',
};

export const FEATURES = {
  ENABLE_AUDIT_LOGS: true,
  ENABLE_THEME_TOGGLE: true,
  ENABLE_USER_MANAGEMENT: true,
};

Files to modify
Update the import line in frontend/utils.js:
From:
import { API_BASE_URL as DEFAULT_API_BASE_URL } from '../shared/config.js';
To:
import { API_BASE_URL as DEFAULT_API_BASE_URL } from './shared/config.js';

(Leave the rest of the file unchanged except optionally making showToast append optional chaining to avoid errors if toastContainer is absent.)

Testing / Validation

• Open any frontend page in local dev or deployed environment.
• Confirm no 404 for /shared/config.js in Network tab.
• Confirm nav loads and theme toggle works (indirectly tests utils import).
• In console: import('./utils.js') should succeed without errors.

Risk
Very low; only adds a file and changes a relative import path for frontend code.

Follow-up (not in this PR)

• Decide on single source of truth for config (build step or runtime injection) to prevent drift.
• Potentially remove /shared/config.js if backend does not require it.

Please open this PR against the default branch.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[netlify]

✅ Deploy Preview for workshop-order ready!

Name	Link
🔨 Latest commit	6388702
🔍 Latest deploy log	https://app.netlify.com/projects/workshop-order/deploys/68c06cfb2053820008b65b82
😎 Deploy Preview	https://deploy-preview-73--workshop-order.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}