Fix/2026 frontend followup improvements

frontend/index.html

@@ -24,7 +24,7 @@
   <footer class="container-fluid navbar-dark bg-dark">
     <div class="row">
       <div class="col-md-4 footer-side center-block">
-        <span style="padding-left: 5px;">Pendleton, SC 29670</span>
+        <span style="padding-left: 5px;">Lancaster, SC 29720</span>
         <br>
         <span class="fa fa-phone"></span>
         <span style="padding-left: 5px;">864.555.5555</span>

frontend/package.json

@@ -15,11 +15,9 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.0.1",
     "axios": "^1.6.7",
-    "axios-mock-adapter": "^1.22.0",
     "bootstrap": "^5.2.0",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
-    "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
@@ -37,6 +35,7 @@
     "@babel/plugin-syntax-jsx": "^7.23.3",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
+    "axios-mock-adapter": "^1.22.0",
     "@testing-library/jest-dom": "^6.4.1",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",

frontend/src/main.jsx

@@ -9,7 +9,12 @@ import { createBaseApi } from '@/shared/base';
 import { getApiUrl } from '@/shared/utils/urls';
 import { store } from './configureStore';
 
-createBaseApi(getApiUrl(), store).then(() => {
+const credentials = {
+  username: import.meta.env.VITE_API_USERNAME ?? 'example-user',
+  password: import.meta.env.VITE_API_PASSWORD ?? 'example-user',
+};
+
+createBaseApi(getApiUrl(), store, credentials).then(() => {
   ReactDOM.createRoot(document.getElementById('react-app')).render(
     <React.StrictMode>
       <Provider store={store}>

frontend/src/screens/home/index.jsx

@@ -20,9 +20,15 @@ const HomeComponent = ({
   const confirmation = {
     isOpen: useSelector((state) => state?.shared?.confirmationModalIsOpen),
     message: useSelector((state) => state?.shared?.confirmationModalMessage),
-    canecllationText: useSelector(
+    cancellationText: useSelector(
       (state) => state?.shared?.confirmationModalCancellationText,
     ),
+    confirmationText: useSelector(
+      (state) => state?.shared?.confirmationModalText,
+    ),
+    confirmButtonStyle: useSelector(
+      (state) => state?.shared?.confirmationModalButtonStyle,
+    ),
     title: useSelector((state) => state?.shared?.confirmationModalTitle),
   };
 
@@ -73,6 +79,9 @@ const HomeComponent = ({
         isOpen={confirmation.isOpen}
         title={confirmation.title}
         message={confirmation.message}
+        confirmationText={confirmation.confirmationText}
+        cancellationText={confirmation.cancellationText}
+        confirmButtonStyle={confirmation.confirmButtonStyle}
         handleConfirm={handleConfirmAction}
         handleReject={handleRejectAction}
       />

frontend/src/screens/home/reducers/home.js

@@ -26,6 +26,14 @@ const actionHandlers = {
       loading: false,
     };
   },
+  [onSuccessful(actionTypes.CREATE_RESERVATION)]: (state, action) => {
+    const reservations = action?.response?.data || [];
+    return {
+      ...state,
+      reservations,
+      loading: false,
+    };
+  },
 };
 
 const reducer = createComponentReducer(

frontend/src/screens/home/tabs/DefaultTab.jsx

@@ -16,7 +16,12 @@ const DefaultTab = ({
   return (
     <div data-name="reservations-tab">
       <div className="col-lg-12 bg-dark mx-auto">
-        <h3>Reservations</h3>
+        <div className="d-flex justify-content-between align-items-center">
+          <h3>Reservations</h3>
+          <Link to="/reservations/new">
+            <Button variant="warning">Book</Button>
+          </Link>
+        </div>
         <div className="container flex-column">
           {loading && reservations.length === 0 && <Loading />}
           {!loading && reservations.length === 0 && (
@@ -31,11 +36,7 @@ const DefaultTab = ({
                   <th scope="col">Stay End Date</th>
                   <th scope="col">Total Charge</th>
                   <th></th>
-                  <th scope="col">
-                    <Link to="/reservations/new">
-                      <Button variant="warning">Book</Button>
-                    </Link>
-                  </th>
+                  <th></th>
                   <th></th>
                 </tr>
               </thead>

frontend/src/shared/base/baseApi.js

@@ -39,11 +39,11 @@ const handleResponseError = (error, store) => {
   return Promise.reject(error);
 };
 
-const getToken = async (url) => {
+const getToken = async (url, credentials = {}) => {
   const formData = new FormData();
   formData.append('grant_type', 'password');
-  formData.append('username', 'example-user');
-  formData.append('password', 'example-user');
+  formData.append('username', credentials.username ?? 'example-user');
+  formData.append('password', credentials.password ?? 'example-user');
 
   const response = await axios.post(`${url}/token`, formData, {
     headers: {
@@ -54,9 +54,9 @@ const getToken = async (url) => {
   return response?.data?.access_token || '';
 };
 
-export const createBaseApi = async (url, store) => {
+export const createBaseApi = async (url, store, credentials = {}) => {
   try {
-    const tokenValue = await getToken(url);
+    const tokenValue = await getToken(url, credentials);
     instance = createInstance(url, tokenValue);
 
     instance.interceptors.request.use(

frontend/src/shared/utils/urls.js

@@ -1,2 +1,6 @@
-/* c8 ignore next */
-export const getApiUrl = () => `${import.meta.env.VITE_RESERVATION_API}`;
+/* c8 ignore next 4 */
+export const getApiUrl = () => {
+  const url = import.meta.env.VITE_RESERVATION_API;
+  if (!url) throw new Error('VITE_RESERVATION_API is not set');
+  return url;
+};

tools/env.example.sh

@@ -9,6 +9,8 @@ export REFRESH_SECRET_KEY=s3cr3t-k3y
 export COOKIE_EXPIRATION=86400
 
 export FRONTEND_PORT=3000
+export VITE_API_USERNAME=example-user
+export VITE_API_PASSWORD=example-user
 
 export RESERVATION_PORT=8080
 export RESERVATION_API=http://localhost:${RESERVATION_PORT}/${ENV}