Merge branch 'main' into feature/settings-page

.github/workflows/api-container.yml

@@ -1,101 +1,95 @@
-name: API Deployment Container
-on:
-  workflow_dispatch: {}
-  pull_request:
-    branches:
-      - main
-    types:
-      - opened
-      - reopened
-      - synchronize
-      - ready_for_review
-    paths:
-      - api/**
-  push:
-    branches:
-      - main
-    paths:
-      - api/**
-jobs:
-  determine-workflow:
-    runs-on: 'ubuntu-latest'
-    outputs:
-      workflow_type: ${{ steps.workflow.outputs.workflow_type }}
-      workflow_envs: ${{ steps.workflow.outputs.workflow_envs }}
-      release_type: ${{ steps.workflow.outputs.release_type }}
-      current_version: ${{ steps.version.outputs.current_version }}
-    steps:
-      - name: Checkout Code
-        uses: actions/checkout@v4
-      - name: Determine Workflow
-        id: workflow
-        shell: bash
-        run: |
-          event=${{ github.event_name }}
-          workflow_type='dev';
-          workflow_envs='["dev"]'
-          if [[ $event == 'workflow_dispatch' && '${{ github.ref_name }}' == 'main' ]];
-          then
-            echo "in if statement"
-            workflow_type='release';
-            workflow_envs='["prod"]'
-          fi
-
-          echo "workflow_type=$workflow_type" >> $GITHUB_OUTPUT
-          echo "workflow_envs=$workflow_envs" >> $GITHUB_OUTPUT
-
-          echo "Running $workflow_type pipeline in environments: $workflow_envs" >> $GITHUB_STEP_SUMMARY
-      - name: Extract Version
-        id: version
-        shell: bash
-        run: |
-          version=$(jq -r '.version' api/package.json)
-          echo "current_version=$version" >> "$GITHUB_OUTPUT"
-  nonprod-deploy:
-    needs: determine-workflow
-    if: needs.determine-workflow.outputs.workflow_type != 'release'
-    strategy:
-      max-parallel: 1
-      matrix:
-        env: ${{ fromJson(needs.determine-workflow.outputs.workflow_envs) }}
-    uses: ./.github/workflows/api-deploy-nonprod.yml
-    with:
-      environments: ${{ matrix.env }}
-      workflow_type: ${{ needs.determine-workflow.outputs.workflow_type }}
-      branch: ${{ github.head_ref || github.ref_name }}
-      current_version: ${{ needs.determine-workflow.outputs.current_version }}
-    secrets:
-      DOCKERHUB_USER: ${{ secrets.DOCKERHUB_USER }}
-      DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
-      TEST: ${{ secrets.TEST }}
-      TEAMCITY_API_ID: ${{ secrets.TEAMCITY_API_ID }}
-      TEAMCITY_URL: ${{ secrets.TEAMCITY_URL }}
-      TEAMCITY_USERNAME: ${{ secrets.TEAMCITY_USERNAME }}
-      TEAMCITY_PASSWORD: ${{ secrets.TEAMCITY_PASSWORD }}
-    permissions:
-      contents: read
-      packages: write
-  prod-deploy:
-    needs: determine-workflow
-    if: needs.determine-workflow.outputs.workflow_type == 'release'
-    strategy:
-      max-parallel: 1
-      matrix:
-        env: ${{ fromJson(needs.determine-workflow.outputs.workflow_envs) }}
-    uses: ./.github/workflows/api-deploy-prod.yml
-    with:
-      environments: ${{ matrix.env }}
-      workflow_type: ${{ needs.determine-workflow.outputs.workflow_type }}
-      branch: ${{ github.head_ref || github.ref_name }}
-      current_version: ${{ needs.determine-workflow.outputs.current_version }}
-    secrets:
-      DOCKERHUB_USER: ${{ secrets.DOCKERHUB_USER }}
-      DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
-      TEST: ${{ secrets.TEST }}
-      TEAMCITY_API_ID: ${{ secrets.TEAMCITY_API_ID }}
-      TEAMCITY_URL: ${{ secrets.TEAMCITY_URL }}
-      TEAMCITY_USERNAME: ${{ secrets.TEAMCITY_USERNAME }}
-      TEAMCITY_PASSWORD: ${{ secrets.TEAMCITY_PASSWORD }}
-    permissions:
-      contents: read
-      packages: write
+name: API Deployment Container
+on:
+  workflow_dispatch: {}
+  pull_request:
+    branches:
+      - main
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
+  push:
+    branches:
+      - main
+    paths:
+      - api/**
+jobs:
+  determine-workflow:
+    runs-on: 'ubuntu-latest'
+    outputs:
+      workflow_type: ${{ steps.workflow.outputs.workflow_type }}
+      workflow_envs: ${{ steps.workflow.outputs.workflow_envs }}
+      release_type: ${{ steps.workflow.outputs.release_type }}
+      current_version: ${{ steps.version.outputs.current_version }}
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+      - name: Determine Workflow
+        id: workflow
+        shell: bash
+        run: |
+          event=${{ github.event_name }}
+          workflow_type='dev';
+          workflow_envs='["dev"]'
+          if [[ $event == 'workflow_dispatch' && '${{ github.ref_name }}' == 'main' ]];
+          then
+            echo "in if statement"
+            workflow_type='release';
+            workflow_envs='["prod"]'
+          fi
+
+          echo "workflow_type=$workflow_type" >> $GITHUB_OUTPUT
+          echo "workflow_envs=$workflow_envs" >> $GITHUB_OUTPUT
+
+          echo "Running $workflow_type pipeline in environments: $workflow_envs" >> $GITHUB_STEP_SUMMARY
+      - name: Extract Version
+        id: version
+        shell: bash
+        run: |
+          version=$(jq -r '.version' api/package.json)
+          echo "current_version=$version" >> "$GITHUB_OUTPUT"
+  nonprod-deploy:
+    needs: determine-workflow
+    if: needs.determine-workflow.outputs.workflow_type != 'release'
+    strategy:
+      max-parallel: 1
+      matrix:
+        env: ${{ fromJson(needs.determine-workflow.outputs.workflow_envs) }}
+    uses: ./.github/workflows/api-deploy-nonprod.yml
+    with:
+      environments: ${{ matrix.env }}
+      workflow_type: ${{ needs.determine-workflow.outputs.workflow_type }}
+      branch: ${{ github.head_ref || github.ref_name }}
+      current_version: ${{ needs.determine-workflow.outputs.current_version }}
+    secrets:
+      DOCKERHUB_USER: ${{ secrets.DOCKERHUB_USER }}
+      DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
+      TEST: ${{ secrets.TEST }}
+      COOLIFY_WEBHOOK_API: ${{ secrets.COOLIFY_WEBHOOK_API }}
+      COOLIFY_TOKEN: ${{ secrets.COOLIFY_TOKEN }}
+    permissions:
+      contents: read
+      packages: write
+  prod-deploy:
+    needs: determine-workflow
+    if: needs.determine-workflow.outputs.workflow_type == 'release'
+    strategy:
+      max-parallel: 1
+      matrix:
+        env: ${{ fromJson(needs.determine-workflow.outputs.workflow_envs) }}
+    uses: ./.github/workflows/api-deploy-prod.yml
+    with:
+      environments: ${{ matrix.env }}
+      workflow_type: ${{ needs.determine-workflow.outputs.workflow_type }}
+      branch: ${{ github.head_ref || github.ref_name }}
+      current_version: ${{ needs.determine-workflow.outputs.current_version }}
+    secrets:
+      DOCKERHUB_USER: ${{ secrets.DOCKERHUB_USER }}
+      DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
+      TEST: ${{ secrets.TEST }}
+      COOLIFY_WEBHOOK_API: ${{ secrets.COOLIFY_WEBHOOK_API }}
+      COOLIFY_TOKEN: ${{ secrets.COOLIFY_TOKEN }}
+    permissions:
+      contents: read
+      packages: write

.github/workflows/api-deploy-nonprod.yml

@@ -22,10 +22,8 @@ on:
       DOCKERHUB_USER: {}
       DOCKERHUB_TOKEN: {}
       TEST: {}
-      TEAMCITY_API_ID: {}
-      TEAMCITY_URL: {}
-      TEAMCITY_USERNAME: {}
-      TEAMCITY_PASSWORD: {}
+      COOLIFY_WEBHOOK_API: {}
+      COOLIFY_TOKEN: {}
 jobs:
   check-inputs:
     runs-on: 'ubuntu-latest'
@@ -33,29 +31,17 @@ jobs:
     steps:
       - name: Check secrets present
         run: |
-          if [[ -z "${{ secrets.TEAMCITY_API_ID }}" ]]; then
-            echo "TEAMCITY_API_ID secret is empty or missing"
+          if [[ -z "${{ secrets.COOLIFY_WEBHOOK_API }}" ]]; then
+            echo "COOLIFY_WEBHOOK_API secret is empty or missing"
             exit 1
           else
-            echo "TEAMCITY_API_ID secret is set"
+            echo "COOLIFY_WEBHOOK_API secret is set"
           fi
-          if [[ -z "${{ secrets.TEAMCITY_URL }}" ]]; then
-            echo "TEAMCITY_URL secret is empty or missing"
+          if [[ -z "${{ secrets.COOLIFY_TOKEN }}" ]]; then
+            echo "COOLIFY_TOKEN secret is empty or missing"
             exit 1
           else
-            echo "TEAMCITY_URL secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_USERNAME }}" ]]; then
-            echo "TEAMCITY_USERNAME secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_USERNAME secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_PASSWORD }}" ]]; then
-            echo "TEAMCITY_PASSWORD secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_PASSWORD secret is set"
+            echo "COOLIFY_TOKEN secret is set"
           fi
           if [[ -z "${{ secrets.DOCKERHUB_USER }}" ]]; then
             echo "DOCKERHUB_USER secret is empty or missing"
@@ -102,12 +88,7 @@ jobs:
       contents: read
       packages: write
     steps:
-      - name: Deploy to Team City
+      - name: Deploy to Coolify
         run: |
-          curl -u ${{ secrets.TEAMCITY_USERNAME }}:${{ secrets.TEAMCITY_PASSWORD }} \
-               -X POST \
-               -H "Content-Type: application/json" \
-               -d '{"buildType": {"id": "${{ secrets.TEAMCITY_API_ID }}"}}' \
-               "${{ secrets.TEAMCITY_URL }}/httpAuth/app/rest/buildQueue" > /dev/null
-
-
+          curl '${{ secrets.COOLIFY_WEBHOOK_API }}' --header 'Authorization: Bearer ${{ secrets.COOLIFY_TOKEN }}'
+    

.github/workflows/api-deploy-prod.yml

@@ -1,111 +1,94 @@
-name: API Deployment Production
-on:
-  workflow_call:
-    inputs:
-      environments:
-        type: string
-        description: An optional list of environments to deploy to.
-        default: 'prod'
-      workflow_type:
-        type: string
-        description: An optional string for workflow types.
-        default: 'prod'
-      branch:
-        type: string
-        description: An optional string to define which branch to checkout.
-        default: 'main'
-      current_version:
-        type: string
-        description: Current Version of the package.json.
-        default: '0.0.0'
-    secrets:
-      DOCKERHUB_USER: {}
-      DOCKERHUB_TOKEN: {}
-      TEST: {}
-      TEAMCITY_API_ID: {}
-      TEAMCITY_URL: {}
-      TEAMCITY_USERNAME: {}
-      TEAMCITY_PASSWORD: {}
-jobs:
-  check-inputs:
-    runs-on: 'ubuntu-latest'
-    environment: ${{ inputs.environments }}
-    steps:
-      - name: Check secrets present
-        run: |
-          if [[ -z "${{ secrets.TEAMCITY_API_ID }}" ]]; then
-            echo "TEAMCITY_API_ID secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_API_ID secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_URL }}" ]]; then
-            echo "TEAMCITY_URL secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_URL secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_USERNAME }}" ]]; then
-            echo "TEAMCITY_USERNAME secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_USERNAME secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_PASSWORD }}" ]]; then
-            echo "TEAMCITY_PASSWORD secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_PASSWORD secret is set"
-          fi
-          if [[ -z "${{ secrets.DOCKERHUB_USER }}" ]]; then
-            echo "DOCKERHUB_USER secret is empty or missing"
-            exit 1
-          else
-            echo "DOCKERHUB_USER secret is set"
-          fi
-          if [[ -z "${{ secrets.DOCKERHUB_TOKEN }}" ]]; then
-            echo "DOCKERHUB_TOKEN secret is empty or missing"
-            exit 1
-          else
-            echo "DOCKERHUB_TOKEN secret is set"
-          fi
-          echo "Current Version: ${{inputs.current_version}}"
-  build:
-    needs: check-inputs
-    if: needs.check-inputs.result == 'success' && inputs.workflow_type == 'release'
-    environment: ${{ inputs.environments }}
-    runs-on: 'ubuntu-latest'
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Branch Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.branch }}
-      - name: Login to Docker
-        uses: docker/login-action@v3
-        with:
-          registry: docker.io
-          username: ${{ secrets.DOCKERHUB_USER }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Docker Build Backend
-        run: docker build -f api/Dockerfile -t john4064/shiftsync:prod_api ./api --build-arg ENVIRONMENT=prod
-      - name: Docker Push Backend
-        run: docker push john4064/shiftsync:prod_api
-  deploy:
-    needs: build
-    if: needs.build.result == 'success' && inputs.workflow_type == 'release'
-    environment: ${{ inputs.environments }}
-    runs-on: 'ubuntu-latest'
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Deploy to Team City
-        run: |
-          curl -u ${{ secrets.TEAMCITY_USERNAME }}:${{ secrets.TEAMCITY_PASSWORD }} \
-               -X POST \
-               -H "Content-Type: application/json" \
-               -d '{"buildType": {"id": "${{ secrets.TEAMCITY_API_ID }}"}}' \
-               "${{ secrets.TEAMCITY_URL }}/httpAuth/app/rest/buildQueue" > /dev/null
+name: API Deployment Production
+on:
+  workflow_call:
+    inputs:
+      environments:
+        type: string
+        description: An optional list of environments to deploy to.
+        default: 'prod'
+      workflow_type:
+        type: string
+        description: An optional string for workflow types.
+        default: 'prod'
+      branch:
+        type: string
+        description: An optional string to define which branch to checkout.
+        default: 'main'
+      current_version:
+        type: string
+        description: Current Version of the package.json.
+        default: '0.0.0'
+    secrets:
+      DOCKERHUB_USER: {}
+      DOCKERHUB_TOKEN: {}
+      TEST: {}
+      COOLIFY_WEBHOOK_API: {}
+      COOLIFY_TOKEN: {}
+jobs:
+  check-inputs:
+    runs-on: 'ubuntu-latest'
+    environment: ${{ inputs.environments }}
+    steps:
+      - name: Check secrets present
+        run: |
+          if [[ -z "${{ secrets.COOLIFY_WEBHOOK_API }}" ]]; then
+            echo "COOLIFY_WEBHOOK_API secret is empty or missing"
+            exit 1
+          else
+            echo "COOLIFY_WEBHOOK_API secret is set"
+          fi
+          if [[ -z "${{ secrets.COOLIFY_TOKEN }}" ]]; then
+            echo "COOLIFY_TOKEN secret is empty or missing"
+            exit 1
+          else
+            echo "COOLIFY_TOKEN secret is set"
+          fi
+          if [[ -z "${{ secrets.DOCKERHUB_USER }}" ]]; then
+            echo "DOCKERHUB_USER secret is empty or missing"
+            exit 1
+          else
+            echo "DOCKERHUB_USER secret is set"
+          fi
+          if [[ -z "${{ secrets.DOCKERHUB_TOKEN }}" ]]; then
+            echo "DOCKERHUB_TOKEN secret is empty or missing"
+            exit 1
+          else
+            echo "DOCKERHUB_TOKEN secret is set"
+          fi
+          echo "Current Version: ${{inputs.current_version}}"
+  build:
+    needs: check-inputs
+    if: needs.check-inputs.result == 'success' && inputs.workflow_type == 'release'
+    environment: ${{ inputs.environments }}
+    runs-on: 'ubuntu-latest'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Branch Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.branch }}
+      - name: Login to Docker
+        uses: docker/login-action@v3
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USER }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Docker Build Backend
+        run: docker build -f api/Dockerfile -t john4064/shiftsync:prod_api ./api --build-arg ENVIRONMENT=prod
+      - name: Docker Push Backend
+        run: docker push john4064/shiftsync:prod_api
+  deploy:
+    needs: build
+    if: needs.build.result == 'success' && inputs.workflow_type == 'release'
+    environment: ${{ inputs.environments }}
+    runs-on: 'ubuntu-latest'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Deploy to Coolify
+        run: |
+          curl '${{ secrets.COOLIFY_WEBHOOK_API }}' --header 'Authorization: Bearer ${{ secrets.COOLIFY_TOKEN }}'
+    

.github/workflows/pr-validation.yml

@@ -1,19 +1,19 @@
-name: PR Validation
-on:
-  pull_request:
-    types: [opened]
-
-permissions:
-  contents: read
-
-jobs:
-  pr-validation:
-    permissions:
-      contents: read
-      pull-requests: write
-    runs-on: 'ubuntu-latest'
-    steps:
-      - uses: TimonVS/pr-labeler-action@v5
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          configuration-path: .github/configs/pr-labeler-configuration.yml
+name: PR Validation
+on:
+  pull_request:
+    types: [opened]
+
+permissions:
+  contents: read
+
+jobs:
+  pr-validation:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ['self-hosted', 'pi']
+    steps:
+      - uses: TimonVS/pr-labeler-action@v5
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          configuration-path: .github/configs/pr-labeler-configuration.yml

.github/workflows/web-container.yml

@@ -9,8 +9,6 @@ on:
       - reopened
       - synchronize
       - ready_for_review
-    paths:
-      - web/**
   push:
     branches:
       - main
@@ -18,7 +16,7 @@ on:
       - web/**
 jobs:
   determine-workflow:
-    runs-on: 'ubuntu-latest'
+    runs-on: ['self-hosted','pi']
     outputs:
       workflow_type: ${{ steps.workflow.outputs.workflow_type }}
       workflow_envs: ${{ steps.workflow.outputs.workflow_envs }}
@@ -68,10 +66,8 @@ jobs:
       DOCKERHUB_USER: ${{ secrets.DOCKERHUB_USER }}
       DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
       TEST: ${{ secrets.TEST }}
-      TEAMCITY_WEB_ID: ${{ secrets.TEAMCITY_WEB_ID }}
-      TEAMCITY_URL: ${{ secrets.TEAMCITY_URL }}
-      TEAMCITY_USERNAME: ${{ secrets.TEAMCITY_USERNAME }}
-      TEAMCITY_PASSWORD: ${{ secrets.TEAMCITY_PASSWORD }}
+      COOLIFY_WEBHOOK_WEB: ${{ secrets.COOLIFY_WEBHOOK_WEB }}
+      COOLIFY_TOKEN: ${{ secrets.COOLIFY_TOKEN }}
     permissions:
       contents: read
       packages: write
@@ -92,10 +88,8 @@ jobs:
       DOCKERHUB_USER: ${{ secrets.DOCKERHUB_USER }}
       DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
       TEST: ${{ secrets.TEST }}
-      TEAMCITY_WEB_ID: ${{ secrets.TEAMCITY_WEB_ID }}
-      TEAMCITY_URL: ${{ secrets.TEAMCITY_URL }}
-      TEAMCITY_USERNAME: ${{ secrets.TEAMCITY_USERNAME }}
-      TEAMCITY_PASSWORD: ${{ secrets.TEAMCITY_PASSWORD }}
+      COOLIFY_WEBHOOK_WEB: ${{ secrets.COOLIFY_WEBHOOK_WEB }}
+      COOLIFY_TOKEN: ${{ secrets.COOLIFY_TOKEN }}
     permissions:
       contents: read
       packages: write

.github/workflows/web-deploy-nonprod.yml

@@ -1,111 +1,94 @@
-name: Web Deployment Non-Production
-on:
-  workflow_call:
-    inputs:
-      environments:
-        type: string
-        description: An optional list of environments to deploy to.
-        default: 'dev'
-      workflow_type:
-        type: string
-        description: An optional string for workflow types.
-        default: 'dev'
-      branch:
-        type: string
-        description: An optional string to define which branch to checkout.
-        default: 'main'
-      current_version:
-        type: string
-        description: Current Version of the package.json.
-        default: '0.0.0'
-    secrets:
-      DOCKERHUB_USER: {}
-      DOCKERHUB_TOKEN: {}
-      TEST: {}
-      TEAMCITY_WEB_ID: {}
-      TEAMCITY_URL: {}
-      TEAMCITY_USERNAME: {}
-      TEAMCITY_PASSWORD: {}
-jobs:
-  check-inputs:
-    runs-on: 'ubuntu-latest'
-    environment: ${{ inputs.environments }}
-    steps:
-      - name: Check secrets present
-        run: |
-          if [[ -z "${{ secrets.TEAMCITY_WEB_ID }}" ]]; then
-            echo "TEAMCITY_WEB_ID secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_WEB_ID secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_URL }}" ]]; then
-            echo "TEAMCITY_URL secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_URL secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_USERNAME }}" ]]; then
-            echo "TEAMCITY_USERNAME secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_USERNAME secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_PASSWORD }}" ]]; then
-            echo "TEAMCITY_PASSWORD secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_PASSWORD secret is set"
-          fi
-          if [[ -z "${{ secrets.DOCKERHUB_USER }}" ]]; then
-            echo "DOCKERHUB_USER secret is empty or missing"
-            exit 1
-          else
-            echo "DOCKERHUB_USER secret is set"
-          fi
-          if [[ -z "${{ secrets.DOCKERHUB_TOKEN }}" ]]; then
-            echo "DOCKERHUB_TOKEN secret is empty or missing"
-            exit 1
-          else
-            echo "DOCKERHUB_TOKEN secret is set"
-          fi
-          echo "Current Version: ${{inputs.current_version}}"
-  build:
-    needs: check-inputs
-    if: needs.check-inputs.result == 'success' && inputs.workflow_type != 'release'
-    environment: ${{ inputs.environments }}
-    runs-on: 'ubuntu-latest'
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Branch Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.branch }}
-      - name: Login to Docker
-        uses: docker/login-action@v3
-        with:
-          registry: docker.io
-          username: ${{ secrets.DOCKERHUB_USER }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Docker Build Backend
-        run: docker build -f web/Dockerfile -t john4064/shiftsync:latest_web ./web --build-arg ENVIRONMENT=dev
-      - name: Docker Push Backend
-        run: docker push john4064/shiftsync:latest_web
-  deploy:
-    needs: build
-    if: needs.build.result == 'success' && inputs.workflow_type != 'release'
-    environment: ${{ inputs.environments }}
-    runs-on: 'ubuntu-latest'
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Deploy to Team City
-        run: |
-          curl -u ${{ secrets.TEAMCITY_USERNAME }}:${{ secrets.TEAMCITY_PASSWORD }} \
-               -X POST \
-               -H "Content-Type: application/json" \
-               -d '{"buildType": {"id": "${{ secrets.TEAMCITY_WEB_ID }}"}}' \
-               "${{ secrets.TEAMCITY_URL }}/httpAuth/app/rest/buildQueue" > /dev/null
+name: Web Deployment Non-Production
+on:
+  workflow_call:
+    inputs:
+      environments:
+        type: string
+        description: An optional list of environments to deploy to.
+        default: 'dev'
+      workflow_type:
+        type: string
+        description: An optional string for workflow types.
+        default: 'dev'
+      branch:
+        type: string
+        description: An optional string to define which branch to checkout.
+        default: 'main'
+      current_version:
+        type: string
+        description: Current Version of the package.json.
+        default: '0.0.0'
+    secrets:
+      DOCKERHUB_USER: {}
+      DOCKERHUB_TOKEN: {}
+      TEST: {}
+      COOLIFY_WEBHOOK_WEB: {}
+      COOLIFY_TOKEN: {}
+jobs:
+  check-inputs:
+    runs-on: 'ubuntu-latest'
+    environment: ${{ inputs.environments }}
+    steps:
+      - name: Check secrets present
+        run: |
+          if [[ -z "${{ secrets.COOLIFY_WEBHOOK_WEB }}" ]]; then
+            echo "COOLIFY_WEBHOOK_WEB secret is empty or missing"
+            exit 1
+          else
+            echo "COOLIFY_WEBHOOK_WEB secret is set"
+          fi
+          if [[ -z "${{ secrets.COOLIFY_TOKEN }}" ]]; then
+            echo "COOLIFY_TOKEN secret is empty or missing"
+            exit 1
+          else
+            echo "COOLIFY_TOKEN secret is set"
+          fi
+          if [[ -z "${{ secrets.DOCKERHUB_USER }}" ]]; then
+            echo "DOCKERHUB_USER secret is empty or missing"
+            exit 1
+          else
+            echo "DOCKERHUB_USER secret is set"
+          fi
+          if [[ -z "${{ secrets.DOCKERHUB_TOKEN }}" ]]; then
+            echo "DOCKERHUB_TOKEN secret is empty or missing"
+            exit 1
+          else
+            echo "DOCKERHUB_TOKEN secret is set"
+          fi
+          echo "Current Version: ${{inputs.current_version}}"
+  build:
+    needs: check-inputs
+    if: needs.check-inputs.result == 'success' && inputs.workflow_type != 'release'
+    environment: ${{ inputs.environments }}
+    runs-on: 'ubuntu-latest'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Branch Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.branch }}
+      - name: Login to Docker
+        uses: docker/login-action@v3
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USER }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Docker Build Backend
+        run: docker build -f web/Dockerfile -t john4064/shiftsync:latest_web ./web --build-arg ENVIRONMENT=dev
+      - name: Docker Push Backend
+        run: docker push john4064/shiftsync:latest_web
+  deploy:
+    needs: build
+    if: needs.build.result == 'success' && inputs.workflow_type != 'release'
+    environment: ${{ inputs.environments }}
+    runs-on: 'ubuntu-latest'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Deploy to Coolify
+        run: |
+          curl '${{ secrets.COOLIFY_WEBHOOK_WEB }}' --header 'Authorization: Bearer ${{ secrets.COOLIFY_TOKEN }}'
+    

.github/workflows/web-deploy-prod.yml

@@ -1,111 +1,94 @@
-name: Web Deployment Production
-on:
-  workflow_call:
-    inputs:
-      environments:
-        type: string
-        description: An optional list of environments to deploy to.
-        default: 'prod'
-      workflow_type:
-        type: string
-        description: An optional string for workflow types.
-        default: 'prod'
-      branch:
-        type: string
-        description: An optional string to define which branch to checkout.
-        default: 'main'
-      current_version:
-        type: string
-        description: Current Version of the package.json.
-        default: '0.0.0'
-    secrets:
-      DOCKERHUB_USER: {}
-      DOCKERHUB_TOKEN: {}
-      TEST: {}
-      TEAMCITY_WEB_ID: {}
-      TEAMCITY_URL: {}
-      TEAMCITY_USERNAME: {}
-      TEAMCITY_PASSWORD: {}
-jobs:
-  check-inputs:
-    runs-on: 'ubuntu-latest'
-    environment: ${{ inputs.environments }}
-    steps:
-      - name: Check secrets present
-        run: |
-          if [[ -z "${{ secrets.TEAMCITY_WEB_ID }}" ]]; then
-            echo "TEAMCITY_WEB_ID secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_WEB_ID secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_URL }}" ]]; then
-            echo "TEAMCITY_URL secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_URL secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_USERNAME }}" ]]; then
-            echo "TEAMCITY_USERNAME secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_USERNAME secret is set"
-          fi
-          if [[ -z "${{ secrets.TEAMCITY_PASSWORD }}" ]]; then
-            echo "TEAMCITY_PASSWORD secret is empty or missing"
-            exit 1
-          else
-            echo "TEAMCITY_PASSWORD secret is set"
-          fi
-          if [[ -z "${{ secrets.DOCKERHUB_USER }}" ]]; then
-            echo "DOCKERHUB_USER secret is empty or missing"
-            exit 1
-          else
-            echo "DOCKERHUB_USER secret is set"
-          fi
-          if [[ -z "${{ secrets.DOCKERHUB_TOKEN }}" ]]; then
-            echo "DOCKERHUB_TOKEN secret is empty or missing"
-            exit 1
-          else
-            echo "DOCKERHUB_TOKEN secret is set"
-          fi
-          echo "Current Version: ${{inputs.current_version}}"
-  build:
-    needs: check-inputs
-    if: needs.check-inputs.result == 'success' && inputs.workflow_type == 'release'
-    environment: ${{ inputs.environments }}
-    runs-on: 'ubuntu-latest'
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Branch Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ inputs.branch }}
-      - name: Login to Docker
-        uses: docker/login-action@v3
-        with:
-          registry: docker.io
-          username: ${{ secrets.DOCKERHUB_USER }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-      - name: Docker Build Backend
-        run: docker build -f web/Dockerfile -t john4064/shiftsync:prod_web ./web --build-arg ENVIRONMENT=prod
-      - name: Docker Push Backend
-        run: docker push john4064/shiftsync:prod_web
-  deploy:
-    needs: build
-    if: needs.build.result == 'success' && inputs.workflow_type == 'release'
-    environment: ${{ inputs.environments }}
-    runs-on: 'ubuntu-latest'
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Deploy to Team City
-        run: |
-          curl -u ${{ secrets.TEAMCITY_USERNAME }}:${{ secrets.TEAMCITY_PASSWORD }} \
-               -X POST \
-               -H "Content-Type: application/json" \
-               -d '{"buildType": {"id": "${{ secrets.TEAMCITY_WEB_ID }}"}}' \
-               "${{ secrets.TEAMCITY_URL }}/httpAuth/app/rest/buildQueue" > /dev/null
+name: Web Deployment Production
+on:
+  workflow_call:
+    inputs:
+      environments:
+        type: string
+        description: An optional list of environments to deploy to.
+        default: 'prod'
+      workflow_type:
+        type: string
+        description: An optional string for workflow types.
+        default: 'prod'
+      branch:
+        type: string
+        description: An optional string to define which branch to checkout.
+        default: 'main'
+      current_version:
+        type: string
+        description: Current Version of the package.json.
+        default: '0.0.0'
+    secrets:
+      DOCKERHUB_USER: {}
+      DOCKERHUB_TOKEN: {}
+      TEST: {}
+      COOLIFY_WEBHOOK_WEB: {}
+      COOLIFY_TOKEN: {}
+jobs:
+  check-inputs:
+    runs-on: 'ubuntu-latest'
+    environment: ${{ inputs.environments }}
+    steps:
+      - name: Check secrets present
+        run: |
+          if [[ -z "${{ secrets.COOLIFY_WEBHOOK_WEB }}" ]]; then
+            echo "COOLIFY_WEBHOOK_WEB secret is empty or missing"
+            exit 1
+          else
+            echo "COOLIFY_WEBHOOK_WEB secret is set"
+          fi
+          if [[ -z "${{ secrets.COOLIFY_TOKEN }}" ]]; then
+            echo "COOLIFY_TOKEN secret is empty or missing"
+            exit 1
+          else
+            echo "COOLIFY_TOKEN secret is set"
+          fi
+          if [[ -z "${{ secrets.DOCKERHUB_USER }}" ]]; then
+            echo "DOCKERHUB_USER secret is empty or missing"
+            exit 1
+          else
+            echo "DOCKERHUB_USER secret is set"
+          fi
+          if [[ -z "${{ secrets.DOCKERHUB_TOKEN }}" ]]; then
+            echo "DOCKERHUB_TOKEN secret is empty or missing"
+            exit 1
+          else
+            echo "DOCKERHUB_TOKEN secret is set"
+          fi
+          echo "Current Version: ${{inputs.current_version}}"
+  build:
+    needs: check-inputs
+    if: needs.check-inputs.result == 'success' && inputs.workflow_type == 'release'
+    environment: ${{ inputs.environments }}
+    runs-on: 'ubuntu-latest'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Branch Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.branch }}
+      - name: Login to Docker
+        uses: docker/login-action@v3
+        with:
+          registry: docker.io
+          username: ${{ secrets.DOCKERHUB_USER }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+      - name: Docker Build Backend
+        run: docker build -f web/Dockerfile -t john4064/shiftsync:prod_web ./web --build-arg ENVIRONMENT=prod
+      - name: Docker Push Backend
+        run: docker push john4064/shiftsync:prod_web
+  deploy:
+    needs: build
+    if: needs.build.result == 'success' && inputs.workflow_type == 'release'
+    environment: ${{ inputs.environments }}
+    runs-on: 'ubuntu-latest'
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Deploy to Coolify
+        run: |
+          curl '${{ secrets.COOLIFY_WEBHOOK_WEB }}' --header 'Authorization: Bearer ${{ secrets.COOLIFY_TOKEN }}'
+    

api/Dockerfile

@@ -1,14 +1,14 @@
-FROM node:20-alpine
-
-WORKDIR /app
-
-COPY ./package*.json ./
-
-RUN npm ci
-
-COPY . ./
-
-EXPOSE 5172
-EXPOSE 5170
-
-CMD npm run dev
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY ./package*.json ./
+
+RUN npm cache clean --force && npm install --no-audit --no-fund
+
+COPY . ./
+
+EXPOSE 5172
+EXPOSE 5170
+
+CMD npm run dev

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shiftsync-website-api",
-  "version": "1.0.11",
+  "version": "1.0.1",
   "private": true,
   "type": "module",
   "scripts": {

api/router/rest/index.js

@@ -0,0 +1,6 @@
+import express from 'express';
+import { userDataRouter } from './userData/index.js';
+
+export const restRouter = express.Router();
+
+restRouter.use('/userData', userDataRouter);

api/router/rest/userData/index.js

@@ -0,0 +1,17 @@
+import express from 'express';
+import { databaseServices } from '../../../services/index.js';
+
+export const userDataRouter = express.Router();
+
+userDataRouter.get('/', async (req, res) => {
+  let data;
+  try {
+    data = await databaseServices.getUsers(req.query);
+    res.status(200);
+  } catch (err) {
+    data = { Error: err?.message };
+    res.status(500);
+  } finally {
+    res.send(data);
+  }
+})

api/router/routes.js

@@ -0,0 +1,6 @@
+import express from 'express';
+import { restRouter } from './rest/index.js';
+
+export const routes = express.Router();
+
+routes.use('/rest', restRouter);

api/server.js

@@ -1,7 +1,6 @@
 import express from 'express';
 import cors from 'cors';
 import dotenv from 'dotenv';
-import fs from 'fs/promises';
 import { medicationRouter } from './services/medications/index.js';
 import { shiftsRouter } from './services/shifts/index.js';
 import { shiftRunQuery } from './services/shiftConnection.js';
@@ -46,12 +45,9 @@ app.get('/api/db-health', async (req, res) => {
     res.status(500).json({ connected: false, error: err.message });
   }
 });
-
 app.get('/api/version', async (req, res) => {
   try {
-    const packageData = await fs.readFile('./package.json', 'utf8');
-    const pkg = JSON.parse(packageData);
-    res.json(pkg.version);
+    res.json('1.0.1');
   } catch (err) {
     console.error(err);
     res.status(500).json({ connected: false, error: err.message });

api/services/connection.js

@@ -0,0 +1,27 @@
+import { Pool } from 'pg';
+import 'dotenv/config';
+
+const poolCreds = {
+  host: process.env.POSTGRES_HOST,
+  database: process.env.POSTGRES_DB,
+  port: process.env.POSTGRES_PORT,
+  user: process.env.POSTGRES_USER,
+  password: process.env.POSTGRES_PASSWORD,
+  ssl:
+    process.env.APP_ENV === 'local'
+      ? null
+      : { require: true, rejectUnauthorized }
+};
+
+const pool = new Pool(poolCreds);
+
+export const runQuery = async (query, params = []) => {
+  const client = await pool.connect();
+
+  try {
+    const pgQueryResponse = await client.query(query, params);
+    return pgQueryResponse?.rows || [];
+  } finally {
+    client.release();
+  }
+}

api/services/department/index.js

@@ -0,0 +1,14 @@
+import express from 'express';
+const router = express.Router();
+
+// GET /api/departments
+router.get('/', (req, res) => {
+    res.json([{ id: 1, name: 'Fire Department' }]);
+});
+
+// POST /api/departments
+router.post('/', (req, res) => {
+    res.status(201).json({ message: 'Department created' });
+});
+
+export default router;

api/services/operations/userData.js

@@ -0,0 +1,15 @@
+import { runQuery } from '../connection.js';
+
+const getUsers = async (args) => {
+  try {
+    const dataResp = await runQuery('SELECT * FROM users');
+    return dataResp;
+  } catch (err) {
+    console.log('GET USERS ERROR: ', err);
+    throw err;
+  }
+};
+
+export const userDataOperations = {
+  getUsers
+}

api/services/user/index.js

@@ -0,0 +1,16 @@
+import express from 'express';
+const router = express.Router();
+
+// GET /api/users
+router.get('/', (req, res) => {
+    res.json([{ id: 1, name: 'John Doe' }]);
+});
+
+// POST /api/users
+router.post('/', (req, res) => {
+    res.status(201).json({ message: 'User created' });
+});
+
+// Add more routes like PUT, DELETE here later
+
+export default router;

web/Dockerfile

@@ -1,17 +1,17 @@
-FROM node:20-alpine
-
-WORKDIR /app
-
-COPY ./package*.json ./
-
-RUN npm ci
-
-COPY . ./
-
-EXPOSE 5173
-EXPOSE 5171
-
-ARG ENVIRONMENT
-ENV ENVIRONMENT ${ENVIRONMENT}
-
-CMD npm run ${ENVIRONMENT}
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY ./package*.json ./
+
+RUN npm cache clean --force && npm install --no-audit --no-fund
+
+COPY . ./
+
+EXPOSE 5173
+EXPOSE 5171
+
+ARG ENVIRONMENT
+ENV ENVIRONMENT ${ENVIRONMENT}
+
+CMD npm run ${ENVIRONMENT}

web/components/common/TransferBox/TransferBox.jsx

@@ -194,7 +194,8 @@ export const TransferBox = ({ fields, leftGroup, rightGroup, onSave, user={} })
         </CenterButton>
         <CenterButton
           onClick={() => {
-            return onSave(rightItems?.map((item) => { return item?.id }))
+            onSave(rightItems?.map((item) => { return item?.id }));
+            setItemSelected({});
           }}
           color='#00B33C'
           buttonEnabled={hasChanges}

web/components/stores/useLocalStore.js

@@ -5,4 +5,6 @@ export const useLocalStore = create((set) => ({
   setUser: (user) => set({ user }),
   department: null,
   setDepartment: (department) => set({ department }),
+  access: null,
+  setAccess: (access) => set({ access }),
 }));

web/package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "shiftsync-website-web",
-  "version": "1.0.8",
+  "version": "1.0.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "shiftsync-website-web",
-      "version": "1.0.8",
+      "version": "1.0.5",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
         "@mui/icons-material": "^7.1.0",
         "@mui/material": "^7.1.0",
-        "axios": "^1.13.2",
+        "axios": "^1.10.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.6.0",
@@ -28,7 +28,7 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^16.0.0",
-        "vite": "^6.4.1"
+        "vite": "^6.3.5"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1045,13 +1045,13 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz",
-      "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.2.tgz",
+      "integrity": "sha512-4SaFZCNfJqvk/kenHpI8xvN42DMaoycy4PzKc5otHxRswww1kAt82OlBuwRVLofCACCTZEcla2Ydxv8scMXaTg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/core": "^0.15.2",
+        "@eslint/core": "^0.15.0",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -1059,9 +1059,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit/node_modules/@eslint/core": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz",
-      "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.0.tgz",
+      "integrity": "sha512-b7ePw78tEWWkpgZCDYkbqDOP8dmM6qe+AOC6iuJqlq1R/0ahMAeH3qynpnqKFGkMltrp44ohV4ubGyvLX28tzw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -1905,13 +1905,13 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
-      "integrity": "sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.10.0.tgz",
+      "integrity": "sha512-/1xYAC4MP/HEG+3duIhFr4ZQXR4sQXOIe+o6sdqzeykGLx6Upp/1p8MHqhINOvGeP7xyNHe7tsiJByc4SSVUxw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
+        "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -2096,16 +2096,12 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
-      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
       "license": "MIT",
       "engines": {
         "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
       }
     },
     "node_modules/cosmiconfig": {
@@ -2627,9 +2623,9 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
-      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
+      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
@@ -2909,9 +2905,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3383,9 +3379,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
-      "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
+      "integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -3405,12 +3401,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.12.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
-      "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
+      "integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.12.0"
+        "react-router": "7.6.2"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3529,9 +3525,9 @@
       }
     },
     "node_modules/set-cookie-parser": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
-      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
       "license": "MIT"
     },
     "node_modules/shebang-command": {
@@ -3692,9 +3688,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "version": "6.3.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
+      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3799,6 +3795,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
+      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shiftsync-website-web",
-  "version": "1.0.10",
   "private": true,
+  "version": "1.0.5",
   "type": "module",
   "scripts": {
     "local": "vite",

web/src/pages/Home/Home.jsx

@@ -14,11 +14,10 @@ export const Home = () => {
   }, []);
 
   return (
-    <div >
+    <div>
       <h1>Home Page</h1>
       <Link to="/settings">Go to Settings</Link>
       <p>Version: {pkg.version}</p>
-      <p>This site does nothing</p>
     </div>
   );
 };

web/src/pages/Settings/Settings.jsx

@@ -1,492 +1,496 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styled from '@emotion/styled';
-import { Stack } from '@mui/material';
-import EditIcon from '@mui/icons-material/Edit';
-import EditOffIcon from '@mui/icons-material/EditOff';
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import { ToggleTabs, TransferBox, useLocalStore } from '@components';
-import { settingsFields } from './helpers';
-
-const OuterContainer = styled(Stack)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
-  padding: 10px 10px 0px 0px;
-`;
-
-const Border = styled('div')`
-  height: 1px;
-  width: 100%;
-  background-color: #A8A8A8;
-`;
-
-const Tab = styled('div')`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  height: 100%;
-  padding: 6px 16px;
-  font-size: 20px;
-  font-weight: 800;
-  color: grey;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-family: "WDXL Lubrifont TC";
-  letter-spacing: .05em;
-  word-spacing: .2em;
-`;
-
-const SlidingIndicator = styled('div')`
-  position: absolute;
-  height: 1px;
-  bottom: -1px;
-  background-color: #4D79FF;
-  transition: left 0.3s ease, width 0.3s ease;
-`;
-
-const CardShell = styled('div')`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-`;
-
-const Card = styled('div')`
-  background-color: #C7C7C7;
-  width: 50%;
-  min-width: 750px;
-  padding: 20px;
-  border-radius: 10px;
-  margin: 5px;
-`;
-
-const CardTitle = styled('p')`
-  color: white;
-  font-weight: 400;
-  font-size: 20px;
-  font-family: "WDXL Lubrifont TC";
-  padding-bottom: 5px;
-`;
-
-const CardHeader = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  padding: 10px;
-`;
-
-const EditArea = styled('div')`
-  display: flex; 
-  flex-direction: row;
-  justify-content: flex-end;
-  padding-top: 10px;
-  color: #4D79FF;
-  font-weight: 600;
-`;
-
-const EditTextButton = styled('div')`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  gap: 4px;
-  padding-bottom: 2px;
-  border-bottom: 2px solid transparent;
-  transition: border-bottom 0.2s ease;
-
-  &:hover {
-    border-bottom: 2px solid #4D79FF;
-  }
-`;
-
-const CardBody = styled('div')`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
-
-const InnerCard = styled('div')`
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-  width: 50%;
-
-  ${({ centered }) => centered && `
-    align-items: center;
-  `}
-`;
-
-const InnerCardRow = styled('div')`
-  display: flex;
-  flex-direction: row;
-  padding: 5px;
-`;
-
-const InnerCardRowLabel = styled('label')`
-  display: flex;
-  justify-content: flex-end;
-  text-align: right;
-  width: 60%;
-  padding-right: 10px;
-  font-size: 14px;
-`;
-
-const InnerCardRowInput = styled('input')`
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  padding: 4px;
-`;
-
-const InnerCardRadioInput = styled('input')`
-  padding-right: 5px;
-`;
-
-const InnerCardRadioLabel = styled('label')`
-  font-size: 14px;
-  padding-left: 5px;
-`;
-
-const InnerCardRowRadioDiv = styled('div')`
-  display: flex;
-  justify-content: space-evenly;
-  width: 100%;
-  padding: 4px;
-`;
-
-const FormRadioButtonLabel = styled('label')``;
-
-const FormInputButtonDiv = styled('div')`
-  display: flex; 
-  flex-direction: row;
-  justify-content: flex-end;
-  padding-top: 10px;
-`;
-
-const FormInputButton = styled('input')`
-  padding: 4px 10px;
-  border-radius: 4px;
-`;
-
-export const Settings = () => {
-  const { user, department, setDepartment } = useLocalStore();
-
-  const isAdministrator = user?.administrator;
-  const isManager = user?.manager;
-  const isScheduler = user?.scheduler;
-
-  const originalDepartmentRef = useRef(department);
-  const [formValues, setFormValues] = useState(() => {
-    const initial = {};
-    settingsFields.forEach(section => {
-      section.cards.forEach(card => {
-        card.fields.forEach(field => {
-          initial[field.id] = department?.[field.id] || '';
-        });
-      });
-    });
-    return initial;
-  });
-  const pageRefs = useRef({});
-  const tabs = [
-      {
-          label: 'Personal',
-          value: 'personal'
-      },
-      {
-          label: 'Department',
-          value: 'department'
-      }
-  ];
-
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const [editMode, setEditMode] = useState(null);
-  const [tabValue, setTabValue] = useState(tabs[0]);
-  const [pageValue, setPageValue] = useState({});
-  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
-
-  const getChangedFields = (original, current) => {
-    const changed = {};
-    for (const key in current) {
-      if (current[key] !== original[key]) {
-        changed[key] = current[key];
-      }
-    }
-    return changed;
-  };
-
-  const changedFields = getChangedFields(originalDepartmentRef.current, formValues);
-  const hasChanges = Object.keys(changedFields).length > 0;
-
-  const onSubmit = (data) => {
-    setDepartment({
-      ...department,
-      ...data
-    });
-    originalDepartmentRef.current = {
-      ...originalDepartmentRef.current,
-      ...data
-    };
-    setEditMode(null);
-  };
-
-  const formatPhoneNumber = (value) => {
-    const cleaned = value.replace(/\D/g, '').slice(0, 10); // Only digits, max 10
-    const length = cleaned.length;
-
-    if (length === 0) return '';
-    if (length < 4) return `(${cleaned}`;
-    if (length < 7) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
-    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
-  };
-
-
-  const handleChange = (e, type) => {
-    let { name, value } = e.target;
-    if (type === 'phone') {
-      value = formatPhoneNumber(value);
-    }
-    setFormValues(prev => ({ ...prev, [name]: value }));
-  };
-
-  useEffect(() => {
-    document.title = 'ShiftSync | Settings';
-  }, []);
-
-  useEffect(() => {
-    const handleResize = () => setWindowWidth(window.innerWidth);
-    window.addEventListener('resize', handleResize);
-
-    // Initial trigger (in case something else needs it)
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (pageValue?.id && pageRefs.current[pageValue.id]) {
-      const el = pageRefs.current[pageValue.id];
-      const rect = el.getBoundingClientRect();
-      const containerRect = el.parentNode.getBoundingClientRect();
-      setIndicatorStyle({
-        left: rect.left - containerRect.left,
-        width: rect.width
-      });
-    }
-  }, [pageValue?.id, windowWidth, window.innerHeight]);
-
-  useEffect(() => {
-    const filteredFields = settingsFields?.filter((field) => {
-      const hasAccess =
-        (field?.accessRequired === 'administrator' && isAdministrator) ||
-        (field?.accessRequired === 'manager' && isManager) ||
-        (field?.accessRequired === 'scheduler' && isScheduler) ||
-        (!field?.accessRequired || field?.accessRequired === 'user');
-
-      return field?.tab === tabValue?.value && hasAccess;
-    });
-
-    if (filteredFields.length > 0) {
-      setPageValue(filteredFields[0]);
-    } else {
-      setPageValue(null);
-    }
-  }, [tabValue, isAdministrator, isManager, isScheduler]);
-
-  return (
-    <div>
-      {user?.administrator || user?.manager ? (
-        <OuterContainer>
-          <ToggleTabs 
-            tabs={tabs}
-            tabValue={tabValue}
-            setTabValue={setTabValue}
-            tabColor='#4D79FF'
-          />
-        </OuterContainer>
-      ) : null }
-      <OuterContainer>
-        {settingsFields?.filter((field) => field?.tab === tabValue?.value)?.filter((field) => {
-          return ((field?.accessRequired === 'administrator' && isAdministrator) || 
-          (field?.accessRequired === 'manager' && isManager) ||
-          (field?.accessRequired === 'scheduler' && isScheduler) ||
-          (field?.accessRequired === 'user' || !field?.accessRequired))
-        })?.map((field) => {
-          return (
-            <Tab
-              key={field?.id}
-              ref={(el) => { pageRefs.current[field?.id] = el; }}
-              onClick={() => setPageValue(field)}
-            >
-              {field?.title}
-            </Tab>
-          )
-        })}
-        <SlidingIndicator style={indicatorStyle} />
-      </OuterContainer>
-      <Border />
-      <CardShell>
-        {pageValue?.cards?.map((card) => {
-          if (
-            (card?.accessRequired === 'administrator' && isAdministrator) || 
-            (card?.accessRequired === 'manager' && isManager) ||
-            (card?.accessRequired === 'scheduler' && isScheduler)
-          ) {
-            return (
-              <Card
-                key={`${card?.id}-card`}
-              >
-                <CardTitle
-                  key={`${card?.id}-card-title`}
-                >
-                  {card?.label}
-                </CardTitle>
-                {card?.fields?.find((field) => field?.type === 'header') !== undefined && (
-                  <div>
-                    <Border key={`${card?.id}-border-1`}/>
-                    <CardHeader
-                      key={`${card?.id}-card-header`}
-                    >
-                      {card?.fields?.map((field) => {
-                        return field?.type === 'header' && (
-                          <InnerCardRow key={`${field?.id}-row`}>
-                            <p style={{ fontSize: 14 }}>
-                              {field?.label}:
-                            </p>
-                            <p style={{ paddingLeft: 10, fontSize: 14 }}>
-                              {department[field?.id]}
-                            </p>
-                          </InnerCardRow>
-                        )
-                      })}
-                    </CardHeader>
-                  </div>
-                )}
-                <Border key={`${card?.id}-border-2`}/>
-                <form
-                  onSubmit={(e) => {
-                    e.preventDefault();
-                    onSubmit(changedFields);
-                  }}
-                >
-                  <EditArea>
-                    {!card?.removeEdit && (
-                      editMode === card?.id ? (
-                        <EditTextButton onClick={() => setEditMode(null)}>
-                          <EditOffIcon sx={{ fontSize: 20 }} /> 
-                          <p>View</p>
-                        </EditTextButton>
-                      ) : (
-                        <EditTextButton onClick={() => setEditMode(card?.id)}>
-                          <EditIcon sx={{ fontSize: 20 }} />
-                          <p>Edit</p>
-                        </EditTextButton>
-                      )
-                    )}
-                  </EditArea>
-                  <CardBody
-                    key={`${card?.id}-card-body`}
-                  >
-                    <InnerCard
-                      key={`${card?.id}-inner-card`}
-                      centered={card.fields.some(f => f.type === 'transfer')}
-                    >
-                      {card?.fields?.map((field) => {
-                        let fieldType;
-                        if (field?.type === 'text') {
-                          fieldType = <InnerCardRowInput
-                            name={field?.id}
-                            disabled={card?.id !== editMode || field?.readOnly}
-                            value={formValues[field?.id] ?? 'Not Provided'}
-                            onChange={(e) => handleChange(e, 'text')}
-                          />;
-                        } else if (field?.type === 'phone') {
-                          fieldType = <InnerCardRowInput 
-                            type="tel"
-                            name="phone"
-                            placeholder="(123) 456-7890"
-                            value={formValues[field?.id]}
-                            disabled={card?.id !== editMode || field?.readOnly}
-                            onChange={(e) => handleChange(e, 'phone')}
-                            pattern="\(\d{3}\) \d{3}-\d{4}"
-                            maxlength="14"
-                          />
-                        } else if (field?.type === 'select') {
-                          fieldType = (
-                            <InnerCardRowRadioDiv>
-                            {field?.options?.map((option) => {
-                              const inputId = `${field.id}-${option.value}`;
-                              return (
-                                <FormRadioButtonLabel htmlFor={inputId} key={inputId}>
-                                  <InnerCardRadioInput 
-                                    type="radio"
-                                    id={inputId}
-                                    name={field?.id}
-                                    value={option?.value}
-                                    checked={formValues[field.id] === option.value}
-                                    disabled={card?.id !== editMode || field?.readOnly}
-                                    onChange={(e) => handleChange(e, 'text')}
-                                  />
-                                  <InnerCardRadioLabel htmlFor={inputId} key={inputId}>
-                                    {option?.label}
-                                  </InnerCardRadioLabel>
-                                </FormRadioButtonLabel>
-                              )
-                            })}
-                            </InnerCardRowRadioDiv>
-                          )
-                        } else if (field?.type === 'transfer') {
-                          fieldType = <TransferBox
-                            style={{ display: 'flex', flexDirection: 'row' }}
-                            user={user}
-                            fields={field}
-                            leftGroup={department[field?.origList]}
-                            rightGroup={department[field?.id]}
-                            onSave={(t) => console.log(t)}
-                          />
-                        }
-                        return field?.type !== 'header' && (
-                          <InnerCardRow key={`${field?.id}-row`}>
-                            {field?.label ? (
-                              <InnerCardRowLabel>
-                                {field?.label}:
-                              </InnerCardRowLabel>
-                            ) : null }
-                            {fieldType}
-                          </InnerCardRow>
-                        )
-                      })}
-                    </InnerCard>
-                  </CardBody>
-                  {card?.id === editMode && (
-                    <FormInputButtonDiv>
-                      <FormInputButton 
-                        type="submit" 
-                        value="Save" 
-                        disabled={!hasChanges}
-                        style={{
-                          backgroundColor: hasChanges ? '#4D79FF' : '',
-                          color: hasChanges ? 'white' : ''
-                        }}
-                      /> 
-                    </FormInputButtonDiv>
-                  )}
-                </form>
-              </Card>
-            )
-          }
-          return null;
-        })}
-      </CardShell>
-    </div>
-  );
-};
+import React, { useEffect, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { Stack } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
+import EditOffIcon from '@mui/icons-material/EditOff';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import { ToggleTabs, TransferBox, useLocalStore } from '@components';
+import { settingsFields } from './helpers';
+
+const OuterContainer = styled(Stack)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  padding: 10px 10px 0px 0px;
+`;
+
+const Border = styled('div')`
+  height: 1px;
+  width: 100%;
+  background-color: #A8A8A8;
+`;
+
+const Tab = styled('div')`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+  padding: 6px 16px;
+  font-size: 20px;
+  font-weight: 800;
+  color: grey;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: "WDXL Lubrifont TC";
+  letter-spacing: .05em;
+  word-spacing: .2em;
+`;
+
+const SlidingIndicator = styled('div')`
+  position: absolute;
+  height: 1px;
+  bottom: -1px;
+  background-color: #4D79FF;
+  transition: left 0.3s ease, width 0.3s ease;
+`;
+
+const CardShell = styled('div')`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+`;
+
+const Card = styled('div')`
+  background-color: #C7C7C7;
+  width: 50%;
+  min-width: 750px;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 5px;
+`;
+
+const CardTitle = styled('p')`
+  color: white;
+  font-weight: 400;
+  font-size: 20px;
+  font-family: "WDXL Lubrifont TC";
+  padding-bottom: 5px;
+`;
+
+const CardHeader = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  padding: 10px;
+`;
+
+const EditArea = styled('div')`
+  display: flex; 
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-top: 10px;
+  color: #4D79FF;
+  font-weight: 600;
+`;
+
+const EditTextButton = styled('div')`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  gap: 4px;
+  padding-bottom: 2px;
+  border-bottom: 2px solid transparent;
+  transition: border-bottom 0.2s ease;
+
+  &:hover {
+    border-bottom: 2px solid #4D79FF;
+  }
+`;
+
+const CardBody = styled('div')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const InnerCard = styled('div')`
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  width: 50%;
+
+  ${({ centered }) => centered && `
+    align-items: center;
+  `}
+`;
+
+const InnerCardRow = styled('div')`
+  display: flex;
+  flex-direction: row;
+  padding: 5px;
+`;
+
+const InnerCardRowLabel = styled('label')`
+  display: flex;
+  justify-content: flex-end;
+  text-align: right;
+  width: 60%;
+  padding-right: 10px;
+  font-size: 14px;
+  align-items: center;
+`;
+
+const InnerCardRowInput = styled('input')`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 4px;
+`;
+
+const InnerCardRadioInput = styled('input')`
+  padding-right: 5px;
+`;
+
+const InnerCardRadioLabel = styled('label')`
+  font-size: 14px;
+  padding-left: 5px;
+  align-items: center;
+`;
+
+const InnerCardRowRadioDiv = styled('div')`
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+  padding: 4px;
+`;
+
+const FormRadioButtonLabel = styled('label')``;
+
+const FormInputButtonDiv = styled('div')`
+  display: flex; 
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-top: 10px;
+`;
+
+const FormInputButton = styled('input')`
+  padding: 4px 10px;
+  border-radius: 4px;
+`;
+
+export const Settings = () => {
+  const { user, department, setDepartment } = useLocalStore();
+
+  const isAdministrator = user?.administrator;
+  const isManager = user?.manager;
+  const isScheduler = user?.scheduler;
+
+  const originalDepartmentRef = useRef(department);
+  const [formValues, setFormValues] = useState(() => {
+    const initial = {};
+    settingsFields.forEach(section => {
+      section.cards.forEach(card => {
+        card.fields.forEach(field => {
+          initial[field.id] = department?.[field.id] || '';
+        });
+      });
+    });
+    return initial;
+  });
+  const pageRefs = useRef({});
+  const tabs = [
+      {
+          label: 'Personal',
+          value: 'personal'
+      },
+      {
+          label: 'Department',
+          value: 'department'
+      }
+  ];
+
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [editMode, setEditMode] = useState(null);
+  const [tabValue, setTabValue] = useState(tabs[0]);
+  const [pageValue, setPageValue] = useState({});
+  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+
+  const getChangedFields = (original, current) => {
+    const changed = {};
+    for (const key in current) {
+      if (current[key] !== original[key]) {
+        changed[key] = current[key];
+      }
+    }
+    return changed;
+  };
+
+  const changedFields = getChangedFields(originalDepartmentRef.current, formValues);
+  const hasChanges = Object.keys(changedFields).length > 0;
+
+  const onSubmit = (data) => {
+    setDepartment({
+      ...department,
+      ...data
+    });
+    originalDepartmentRef.current = {
+      ...originalDepartmentRef.current,
+      ...data
+    };
+    setEditMode(null);
+  };
+
+  const formatPhoneNumber = (value) => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 10); // Only digits, max 10
+    const length = cleaned.length;
+
+    if (length === 0) return '';
+    if (length < 4) return `(${cleaned}`;
+    if (length < 7) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+  };
+
+
+  const handleChange = (e, type) => {
+    let { name, value } = e.target;
+    if (type === 'phone') {
+      value = formatPhoneNumber(value);
+    }
+    setFormValues(prev => ({ ...prev, [name]: value }));
+  };
+
+  useEffect(() => {
+    document.title = 'ShiftSync | Settings';
+  }, []);
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+
+    // Initial trigger (in case something else needs it)
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (pageValue?.id && pageRefs.current[pageValue.id]) {
+      const el = pageRefs.current[pageValue.id];
+      const rect = el.getBoundingClientRect();
+      const containerRect = el.parentNode.getBoundingClientRect();
+      setIndicatorStyle({
+        left: rect.left - containerRect.left,
+        width: rect.width
+      });
+    }
+  }, [pageValue?.id, windowWidth, window.innerHeight]);
+
+  useEffect(() => {
+    const filteredFields = settingsFields?.filter((field) => {
+      const hasAccess =
+        (field?.accessRequired === 'administrator' && isAdministrator) ||
+        (field?.accessRequired === 'manager' && isManager) ||
+        (field?.accessRequired === 'scheduler' && isScheduler) ||
+        (!field?.accessRequired || field?.accessRequired === 'user');
+
+      return field?.tab === tabValue?.value && hasAccess;
+    });
+
+    if (filteredFields.length > 0) {
+      setPageValue(filteredFields[0]);
+    } else {
+      setPageValue(null);
+    }
+  }, [tabValue, isAdministrator, isManager, isScheduler]);
+
+  return (
+    <div>
+      {user?.administrator || user?.manager ? (
+        <OuterContainer>
+          <ToggleTabs 
+            tabs={tabs}
+            tabValue={tabValue}
+            setTabValue={setTabValue}
+            tabColor='#4D79FF'
+          />
+        </OuterContainer>
+      ) : null }
+      <OuterContainer>
+        {settingsFields?.filter((field) => field?.tab === tabValue?.value)?.filter((field) => {
+          return ((field?.accessRequired === 'administrator' && isAdministrator) || 
+          (field?.accessRequired === 'manager' && isManager) ||
+          (field?.accessRequired === 'scheduler' && isScheduler) ||
+          (field?.accessRequired === 'user' || !field?.accessRequired))
+        })?.map((field) => {
+          return (
+            <Tab
+              key={field?.id}
+              ref={(el) => { pageRefs.current[field?.id] = el; }}
+              onClick={() => setPageValue(field)}
+            >
+              {field?.title}
+            </Tab>
+          )
+        })}
+        <SlidingIndicator style={indicatorStyle} />
+      </OuterContainer>
+      <Border />
+      <CardShell>
+        {pageValue?.cards?.map((card) => {
+          if (
+            (card?.accessRequired === 'administrator' && isAdministrator) || 
+            (card?.accessRequired === 'manager' && isManager) ||
+            (card?.accessRequired === 'scheduler' && isScheduler)
+          ) {
+            return (
+              <Card
+                key={`${card?.id}-card`}
+              >
+                <CardTitle
+                  key={`${card?.id}-card-title`}
+                >
+                  {card?.label}
+                </CardTitle>
+                {card?.fields?.find((field) => field?.type === 'header') !== undefined && (
+                  <div>
+                    <Border key={`${card?.id}-border-1`}/>
+                    <CardHeader
+                      key={`${card?.id}-card-header`}
+                    >
+                      {card?.fields?.map((field) => {
+                        return field?.type === 'header' && (
+                          <InnerCardRow key={`${field?.id}-row`}>
+                            <p style={{ fontSize: 14 }}>
+                              {field?.label}:
+                            </p>
+                            <p style={{ paddingLeft: 10, fontSize: 14 }}>
+                              {department[field?.id]}
+                            </p>
+                          </InnerCardRow>
+                        )
+                      })}
+                    </CardHeader>
+                  </div>
+                )}
+                <Border key={`${card?.id}-border-2`}/>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    onSubmit(changedFields);
+                  }}
+                >
+                  <EditArea>
+                    {!card?.removeEdit && (
+                      editMode === card?.id ? (
+                        <EditTextButton onClick={() => setEditMode(null)}>
+                          <EditOffIcon sx={{ fontSize: 20 }} /> 
+                          <p>View</p>
+                        </EditTextButton>
+                      ) : (
+                        <EditTextButton onClick={() => setEditMode(card?.id)}>
+                          <EditIcon sx={{ fontSize: 20 }} />
+                          <p>Edit</p>
+                        </EditTextButton>
+                      )
+                    )}
+                  </EditArea>
+                  <CardBody
+                    key={`${card?.id}-card-body`}
+                  >
+                    <InnerCard
+                      key={`${card?.id}-inner-card`}
+                      centered={card.fields.some(f => f.type === 'transfer')}
+                    >
+                      {card?.fields?.map((field) => {
+                        let fieldType;
+                        if (field?.type === 'text') {
+                          fieldType = <InnerCardRowInput
+                            name={field?.id}
+                            disabled={card?.id !== editMode || field?.readOnly}
+                            value={formValues[field?.id] ?? 'Not Provided'}
+                            onChange={(e) => handleChange(e, 'text')}
+                          />;
+                        } else if (field?.type === 'phone') {
+                          fieldType = <InnerCardRowInput 
+                            type="tel"
+                            name="phone"
+                            placeholder="(123) 456-7890"
+                            value={formValues[field?.id]}
+                            disabled={card?.id !== editMode || field?.readOnly}
+                            onChange={(e) => handleChange(e, 'phone')}
+                            pattern="\(\d{3}\) \d{3}-\d{4}"
+                            maxlength="14"
+                          />
+                        } else if (field?.type === 'select') {
+                          fieldType = (
+                            <InnerCardRowRadioDiv>
+                            {field?.options?.map((option) => {
+                              const inputId = `${field.id}-${option.value}`;
+                              return (
+                                <FormRadioButtonLabel htmlFor={inputId} key={inputId}>
+                                  <InnerCardRadioInput 
+                                    type="radio"
+                                    id={inputId}
+                                    name={field?.id}
+                                    value={option?.value}
+                                    checked={formValues[field.id] === option.value}
+                                    disabled={card?.id !== editMode || field?.readOnly}
+                                    onChange={(e) => handleChange(e, 'text')}
+                                  />
+                                  <InnerCardRadioLabel htmlFor={inputId} key={inputId}>
+                                    {option?.label}
+                                  </InnerCardRadioLabel>
+                                </FormRadioButtonLabel>
+                              )
+                            })}
+                            </InnerCardRowRadioDiv>
+                          )
+                        } else if (field?.type === 'transfer') {
+                          fieldType = <TransferBox
+                            style={{ display: 'flex', flexDirection: 'row' }}
+                            user={user}
+                            fields={field}
+                            leftGroup={department[field?.origList]}
+                            rightGroup={department[field?.id]}
+                            onSave={(t) => {
+                              return onSubmit({ [field.id]: t });
+                            }}
+                          />
+                        }
+                        return field?.type !== 'header' && (
+                          <InnerCardRow key={`${field?.id}-row`}>
+                            {field?.label ? (
+                              <InnerCardRowLabel>
+                                {field?.label}:
+                              </InnerCardRowLabel>
+                            ) : null }
+                            {fieldType}
+                          </InnerCardRow>
+                        )
+                      })}
+                    </InnerCard>
+                  </CardBody>
+                  {card?.id === editMode && (
+                    <FormInputButtonDiv>
+                      <FormInputButton 
+                        type="submit" 
+                        value="Save" 
+                        disabled={!hasChanges}
+                        style={{
+                          backgroundColor: hasChanges ? '#4D79FF' : '',
+                          color: hasChanges ? 'white' : ''
+                        }}
+                      /> 
+                    </FormInputButtonDiv>
+                  )}
+                </form>
+              </Card>
+            )
+          }
+          return null;
+        })}
+      </CardShell>
+    </div>
+  );
+};

web/src/router/AppRouter.jsx

@@ -1,163 +1,170 @@
-import React, { useEffect, useState } from 'react';
-import { Routes, Route } from 'react-router-dom';
-import { Home, Profile, Schedule, Settings } from '@src/pages';
-import { Shell } from '@components';
-import { useLocalStore } from '@components';
-import axios from "axios";
-
-const dept = {
-  id: 1,
-  company: 'Darien EMS - Post 53',
-  abv: 'DEMS',
-  billing_address: '0 Ledge Road',
-  town: 'Darien',
-  state: 'Connecticut',
-  postal: '06820',
-  country: 'United States',
-  phone: '',
-  display_time: '12',
-  start_day: 'sunday',
-  company_logo: '',
-  employee_count: 1,
-  subscription_expiration: '10/01/2025',
-  schedulers: [3],
-  managers: [2],
-  administrators: [1]
-};
-
-const users = [
-  {
-    id: 1,
-    first_name: 'ShiftSync-Administrator',
-    last_name: 'Test-User',
-    email: 'testuserA@shift-sync.com',
-    is_ss_admin: false
-  },
-  {
-    id: 2,
-    first_name: 'ShiftSync-Manager',
-    last_name: 'Test-User',
-    email: 'testuserM@shift-sync.com',
-    is_ss_admin: false
-  },
-  {
-    id: 3,
-    first_name: 'ShiftSync-Scheduler',
-    last_name: 'Test-User',
-    email: 'testuserS@shift-sync.com',
-    is_ss_admin: false
-  },
-  {
-    id: 4,
-    first_name: 'ShiftSync-User',
-    last_name: 'Test-User',
-    email: 'testuserU@shift-sync.com',
-    is_ss_admin: false
-  },
-]
-
-const AppRouter = () => {
-  const { user, setUser, setDepartment } = useLocalStore();
-  const [userChanged, setUserChanged] = useState(false);
-  const isDev = true; // change for it.
-
-  const fetchAPI = async () => {
-    const location = window.location;
-    const uri = `${location?.protocol}//${location.hostname}/api`;
-    const response = await axios.get(uri);
-    console.log(response.data.fruits);
-  };
-
-  useEffect(() => {
-    const localVersion = localStorage.getItem("APP_VERSION");
-    const currentVersion = window.APP_VERSION;
-
-    if (localVersion && localVersion !== currentVersion) {
-      console.log("Version changed, forcing reload");
-      localStorage.setItem("APP_VERSION", currentVersion);
-      window.location.reload(true); // force full page reload
-    } else {
-      localStorage.setItem("APP_VERSION", currentVersion);
-    }
-    
-    fetchAPI();
-    // await call for getting the count of employees and any other calls to db.
-    const employee_count = 1;
-    const subs_expiration = '10/22/2025';
-    setUser({
-      ...users[0],
-      scheduler: dept?.schedulers?.includes(1),
-      manager: dept?.managers?.includes(1),
-      administrator: dept?.administrators?.includes(1)
-    });
-    const newAdministrators = dept?.administrators?.map((admin) => {
-      const user = users?.find((user) => {
-        return user?.id === admin;
-      });
-      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
-    });
-    const newManagers = dept?.managers?.map((manager) => {
-      const user = users?.find((user) => {
-        return user?.id === manager;
-      });
-      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
-    });
-    const newSchedulers = dept?.schedulers?.map((scheduler) => {
-      const user = users?.find((user) => {
-        return user?.id === scheduler;
-      });
-      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
-    });
-    const newUsers = users?.map((user) => {
-      return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
-    });
-    setDepartment({
-      ...dept,
-      users: newUsers,
-      schedulers: newSchedulers,
-      managers: newManagers,
-      administrators: newAdministrators,
-      employee_count,
-      subs_expiration
-    });
-  }, []);
-
-  useEffect(() => {
-    if (!userChanged && user) {
-      if (user?.is_ss_admin) {
-        setUser({
-          ...user,
-          scheduler: true,
-          manager: true,
-          administrator: true,
-        });
-      } else if (user?.administrator) {
-        setUser({
-          ...user,
-          scheduler: true,
-          manager: true,
-        });
-      } else if (user?.manager) {
-        setUser({
-          ...user,
-          scheduler: true,
-        });
-      }
-      setUserChanged(true);
-    }
-  }, [user]);
-
-
-  return (
-    <Shell>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/schedule" element={<Schedule />} />
-        <Route path="/settings" element={<Settings />} />
-        <Route path="/profile" element={<Profile />} />
-      </Routes>
-    </Shell>
-  );
-};
-
-export default AppRouter
+import React, { useEffect, useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { Home, Profile, Schedule, Settings } from '@src/pages';
+import { Shell } from '@components';
+import { useLocalStore } from '@components';
+import { fetchAPI } from './axios.js';
+
+const dept = {
+  id: 1,
+  company: 'Darien EMS - Post 53',
+  abv: 'DEMS',
+  billing_address: '0 Ledge Road',
+  town: 'Darien',
+  state: 'Connecticut',
+  postal: '06820',
+  country: 'United States',
+  phone: '',
+  display_time: '12',
+  start_day: 'sunday',
+  company_logo: '',
+  employee_count: 1,
+  subscription_expiration: '10/01/2025',
+  schedulers: [3],
+  managers: [2],
+  administrators: [1]
+};
+
+const users = [
+  {
+    id: 1,
+    first_name: 'ShiftSync-Administrator',
+    last_name: 'Test-User',
+    email: 'testuserA@shift-sync.com',
+    accessLevel: 150,
+    is_ss_admin: false
+  },
+  {
+    id: 2,
+    first_name: 'ShiftSync-Manager',
+    last_name: 'Test-User',
+    email: 'testuserM@shift-sync.com',
+    accessLevel: 100,
+    is_ss_admin: false
+  },
+  {
+    id: 3,
+    first_name: 'ShiftSync-Scheduler',
+    last_name: 'Test-User',
+    email: 'testuserS@shift-sync.com',
+    accessLevel: 50,
+    is_ss_admin: false
+  },
+  {
+    id: 4,
+    first_name: 'ShiftSync-User',
+    last_name: 'Test-User',
+    email: 'testuserU@shift-sync.com',
+    accessLevel: 1,
+    is_ss_admin: false
+  },
+];
+
+const AppRouter = () => {
+  const { user, setUser, setDepartment } = useLocalStore();
+  const [userChanged, setUserChanged] = useState(false);
+
+  useEffect(() => {
+    const init = async () => {
+      const localVersion = localStorage.getItem("APP_VERSION");
+      const currentVersion = window.APP_VERSION;
+
+      if (localVersion && localVersion !== currentVersion) {
+        console.log("Version changed, forcing reload");
+        localStorage.setItem("APP_VERSION", currentVersion);
+        window.location.reload(true);
+        return;
+      } else {
+        localStorage.setItem("APP_VERSION", currentVersion);
+      }
+
+      const data = await fetchAPI('userData', 'get');
+      console.log('data:', data);
+
+      // TODO: Replace this with real data from your API
+      // const users = data?.users || [];   // Example fix
+      // const dept = data?.dept || {};     // Example fix
+
+      const employee_count = 1;
+      const subs_expiration = '10/22/2025';
+
+      setUser({
+        ...users[0],
+        scheduler: dept?.schedulers?.includes(1),
+        manager: dept?.managers?.includes(1),
+        administrator: dept?.administrators?.includes(1)
+      });
+
+      const newAdministrators = dept?.administrators?.map((admin) => {
+        const user = users?.find((user) => user?.id === admin);
+        return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
+      });
+
+      const newManagers = dept?.managers?.map((manager) => {
+        const user = users?.find((user) => user?.id === manager);
+        return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
+      });
+
+      const newSchedulers = dept?.schedulers?.map((scheduler) => {
+        const user = users?.find((user) => user?.id === scheduler);
+        return { id: user?.id, value: `${user?.last_name}, ${user?.first_name}` };
+      });
+
+      const newUsers = users?.map((user) => ({
+        id: user?.id,
+        value: `${user?.last_name}, ${user?.first_name}`
+      }));
+
+      setDepartment({
+        ...dept,
+        users: newUsers,
+        schedulers: newSchedulers,
+        managers: newManagers,
+        administrators: newAdministrators,
+        employee_count,
+        subs_expiration
+      });
+    };
+
+    init();
+  }, []);
+
+  useEffect(() => {
+    if (!userChanged && user) {
+      if (user?.is_ss_admin) {
+        setUser({
+          ...user,
+          scheduler: true,
+          manager: true,
+          administrator: true,
+        });
+      } else if (user?.administrator) {
+        setUser({
+          ...user,
+          scheduler: true,
+          manager: true,
+        });
+      } else if (user?.manager) {
+        setUser({
+          ...user,
+          scheduler: true,
+        });
+      }
+      setUserChanged(true);
+    }
+  }, [user]);
+
+
+  return (
+    <Shell>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/schedule" element={<Schedule />} />
+        <Route path="/settings" element={<Settings />} />
+        <Route path="/profile" element={<Profile />} />
+      </Routes>
+    </Shell>
+  );
+};
+
+export default AppRouter

web/src/router/axios.js

@@ -0,0 +1,27 @@
+import axios from 'axios';
+
+export const fetchAPI = async (endpoint, type, body = null) => {
+  const location = window.location;
+  const url = `${location?.protocol}//${location.hostname}${location?.hostname === 'localhost' ? ':5172' : ''}/api/rest/${endpoint}`;
+
+  const requestOptions = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  };
+
+  try {
+    let response;
+    if (type === 'post') {
+      response = await axios.post(url, body, requestOptions);
+    } else if (type === 'get') {
+      response = await axios.get(url, requestOptions);
+    } else {
+      console.warn('No proper type given: ', type);
+      return;
+    }
+    return response.data;
+  } catch (err) {
+    console.error('PG Rest Query Error: ', err);
+  }
+};