Merge pull request 'Frontend_Fixes' (#3) from Frontend_Fixes into main

Reviewed-on: #3

.gitea/workflows/test-branches.yaml

@@ -3,65 +3,45 @@ name: Run Tests on Branches
 on:
   push:
     branches-ignore:
-    - 'main'
+      - 'main'
 
 jobs:
   test-backend:
     name: Backend Tests
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout Code
+      - name: Checkout Code
-      uses: actions/checkout@v3
+        uses: actions/checkout@v3
 
-    - name: Setup Node.js
+      - name: Setup Node.js
-      uses: actions/setup-node@v3
+        uses: actions/setup-node@v3
-      with:
+        with:
-        node-version: '20'
+          node-version: '20'
-        cache: 'npm'
+          cache: 'npm'
-        cache-dependency-path: backend/package-lock.json
+          cache-dependency-path: backend/package-lock.json
 
-    - name: Install Backend Dependencies
+      - name: Install Backend Dependencies
-      run: cd backend && npm ci
+        run: cd backend && npm ci
 
-    - name: Run Backend Tests
+      - name: Run Backend Tests
-      run: cd backend && npm test -- --ci
+        run: cd backend && npm test -- --ci
 
   test-frontend:
     name: Frontend Tests
     runs-on: ubuntu-latest
     steps:
-    - name: Checkout Code
+      - name: Checkout Code
-      uses: actions/checkout@v3
+        uses: actions/checkout@v3
 
-    - name: Setup Node.js
+      - name: Setup Node.js
-      uses: actions/setup-node@v3
+        uses: actions/setup-node@v3
-      with:
+        with:
-        node-version: '20'
+          node-version: '20'
-        cache: 'npm'
+          cache: 'npm'
-        cache-dependency-path: frontend/package-lock.json
+          cache-dependency-path: frontend/package-lock.json
 
-    - name: Install Frontend Dependencies
+      - name: Install Frontend Dependencies
-      run: cd frontend && npm ci
+        run: cd frontend && npm ci
 
-    - name: Run Frontend Tests
+      - name: Run Frontend Tests
-      run: cd frontend && npm test -- --run --reporter=basic
+        run: cd frontend && npm test -- --run --reporter=basic
-
-  test-pip:
-    name: PIP Tests
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout Code
-      uses: actions/checkout@v3
-
-    - name: Setup Node.js
-      uses: actions/setup-node@v3
-      with:
-        node-version: '20'
-        cache: 'npm'
-        cache-dependency-path: pip-platform/package-lock.json
-
-    - name: Install PIP dependences
-      run: cd pip-platform && npm ci
-
-    - name: Run PIP Tests
-      run: cd pip-platform && npm test -- --run --reporter=basic

frontend/src/App.css

@@ -11,12 +11,7 @@
   flex: 1;
   overflow-y: auto;
   overscroll-behavior: contain;
-}
+  padding-bottom: calc(6rem + env(safe-area-inset-bottom));
-
-@media (max-width: 768px) {
-  .app-content {
-    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
-  }
 }
 
 @keyframes fadeInUp {

frontend/src/components/BottomNav.css

@@ -1,123 +1,119 @@
 .bottom-nav {
-  display: none;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  width: 100%;
+  max-width: 48rem;
+  z-index: 50;
+  padding: 0.25rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
+  background: var(--surface-container-lowest);
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  height: 5.5rem;
 }
 
-@media (max-width: 768px) {
+.bottom-nav-item {
-  .bottom-nav {
+  display: flex;
-    display: flex;
+  flex-direction: column;
-    justify-content: space-around;
+  align-items: center;
-    align-items: flex-end;
+  justify-content: flex-end;
-    position: fixed;
+  gap: 0.15rem;
-    left: 0;
+  padding: 0.25rem 0.5rem;
-    right: 0;
+  background: transparent;
-    bottom: 0;
+  border: none;
-    z-index: 50;
+  cursor: pointer;
-    padding: 0.25rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
+  color: var(--on-surface-variant);
-    background: var(--surface-container-lowest);
+  font: inherit;
-    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
+  -webkit-tap-highlight-color: transparent;
-    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  transition: color 0.15s;
-    height: 5.5rem;
+  position: relative;
-  }
+  min-width: 3.5rem;
-
+}
-  .bottom-nav-item {
+
-    display: flex;
+.bottom-nav-item.disabled {
-    flex-direction: column;
+  opacity: 0.4;
-    align-items: center;
+  cursor: not-allowed;
-    justify-content: flex-end;
+}
-    gap: 0.15rem;
+
-    padding: 0.25rem 0.5rem;
+.nav-icon-wrap {
-    background: transparent;
+  display: inline-flex;
-    border: none;
+  align-items: center;
-    cursor: pointer;
+  justify-content: center;
-    color: var(--on-surface-variant);
+  width: 2.75rem;
-    font: inherit;
+  height: 2.75rem;
-    -webkit-tap-highlight-color: transparent;
+  border-radius: var(--radius-full);
-    transition: color 0.15s;
+  color: inherit;
-    position: relative;
+  position: relative;
-    min-width: 3.5rem;
+}
-  }
+
-
+.nav-fab {
-  .bottom-nav-item.disabled {
+  display: inline-flex;
-    opacity: 0.4;
+  align-items: center;
-    cursor: not-allowed;
+  justify-content: center;
-  }
+  width: 3.5rem;
-
+  height: 3.5rem;
-  .nav-icon-wrap {
+  border-radius: var(--radius-full);
-    display: inline-flex;
+  background: var(--tertiary-container);
-    align-items: center;
+  color: var(--on-tertiary);
-    justify-content: center;
+  box-shadow: 0 4px 14px rgba(70, 0, 173, 0.35);
-    width: 2.75rem;
+  margin-top: -1.5rem;
-    height: 2.75rem;
+  transition: transform 0.15s;
-    border-radius: var(--radius-full);
+}
-    color: inherit;
+
-    position: relative;
+.nav-fab:active {
-  }
+  transform: scale(0.92);
-
+}
-  .nav-fab {
+
-    display: inline-flex;
+.nav-badge {
-    align-items: center;
+  position: absolute;
-    justify-content: center;
+  top: 0;
-    width: 3.5rem;
+  right: -2px;
-    height: 3.5rem;
+  width: 1.125rem;
-    border-radius: var(--radius-full);
+  height: 1.125rem;
-    background: var(--tertiary-container);
+  background: var(--error);
-    color: var(--on-tertiary);
+  color: var(--on-error);
-    box-shadow: 0 4px 14px rgba(70, 0, 173, 0.35);
+  font-size: 0.625rem;
-    margin-top: -1.5rem;
+  font-weight: 700;
-    transition: transform 0.15s;
+  display: flex;
-  }
+  align-items: center;
-
+  justify-content: center;
-  .nav-fab:active {
+  border-radius: var(--radius-full);
-    transform: scale(0.92);
+  border: 2px solid var(--surface-container-lowest);
-  }
+  line-height: 1;
-
+}
-  .nav-badge {
+
-    position: absolute;
+.nav-label {
-    top: 0;
+  font-size: 0.7rem;
-    right: -2px;
+  font-weight: 500;
-    width: 1.125rem;
+  line-height: 1;
-    height: 1.125rem;
+  color: var(--on-surface-variant);
-    background: var(--error);
+}
-    color: var(--on-error);
+
-    font-size: 0.625rem;
+.nav-label--active {
-    font-weight: 700;
+  color: var(--primary);
-    display: flex;
+  font-weight: 700;
-    align-items: center;
+}
-    justify-content: center;
+
-    border-radius: var(--radius-full);
+.nav-indicator {
-    border: 2px solid var(--surface-container-lowest);
+  width: 0.375rem;
-    line-height: 1;
+  height: 0.375rem;
-  }
+  background: var(--primary);
-
+  border-radius: var(--radius-full);
-  .nav-label {
+  margin-top: 0.125rem;
-    font-size: 0.7rem;
+}
-    font-weight: 500;
+
-    line-height: 1;
+.bottom-nav-item.active .nav-icon-wrap {
-    color: var(--on-surface-variant);
+  color: var(--primary);
-  }
+}
-
+
-  .nav-label--active {
+.bottom-nav-item.active .nav-icon-wrap svg {
-    color: var(--primary);
+  stroke-width: 2.5;
-    font-weight: 700;
+}
-  }
+
-
+.nav-elevated.active .nav-label {
-  .nav-indicator {
+  color: var(--tertiary);
-    width: 0.375rem;
-    height: 0.375rem;
-    background: var(--primary);
-    border-radius: var(--radius-full);
-    margin-top: 0.125rem;
-  }
-
-  .bottom-nav-item.active .nav-icon-wrap {
-    color: var(--primary);
-  }
-
-  .bottom-nav-item.active .nav-icon-wrap svg {
-    stroke-width: 2.5;
-  }
-
-  .nav-elevated.active .nav-label {
-    color: var(--tertiary);
-  }
 }

frontend/src/components/TopBar.css

@@ -1,63 +1,57 @@
 .top-bar {
-  display: none;
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 40;
+  background: var(--surface);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
 }
 
-@media (max-width: 768px) {
+.topbar-inner {
-  .top-bar {
+  display: flex;
-    display: block;
+  align-items: center;
-    position: sticky;
+  justify-content: space-between;
-    top: 0;
+  height: var(--touch-target-min);
-    z-index: 40;
+  padding: 0 var(--margin-main);
-    background: var(--surface);
+  max-width: 48rem;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  margin: 0 auto;
-  }
+}
-
+
-  .topbar-inner {
+.topbar-back {
-    display: flex;
+  display: inline-flex;
-    align-items: center;
+  align-items: center;
-    justify-content: space-between;
+  justify-content: center;
-    height: var(--touch-target-min);
+  width: 2.5rem;
-    padding: 0 var(--margin-main);
+  height: 2.5rem;
-    max-width: 48rem;
+  border-radius: var(--radius-full);
-    margin: 0 auto;
+  border: none;
-  }
+  background: transparent;
-
+  color: var(--primary);
-  .topbar-back {
+  cursor: pointer;
-    display: inline-flex;
+  transition: background 0.15s;
-    align-items: center;
+}
-    justify-content: center;
+
-    width: 2.5rem;
+.topbar-back:hover {
-    height: 2.5rem;
+  background: var(--surface-container-high);
-    border-radius: var(--radius-full);
+}
-    border: none;
+
-    background: transparent;
+.topbar-title {
-    color: var(--primary);
+  font-size: 1.15rem;
-    cursor: pointer;
+  font-weight: 700;
-    transition: background 0.15s;
+  color: var(--primary);
-  }
+  letter-spacing: -0.01em;
-
+}
-  .topbar-back:hover {
+
-    background: var(--surface-container-high);
+.topbar-logo-img {
-  }
+  height: 2rem;
-
+  width: auto;
-  .topbar-title {
+}
-    font-size: 1.15rem;
+
-    font-weight: 700;
+.topbar-spacer {
-    color: var(--primary);
+  width: 2.5rem;
-    letter-spacing: -0.01em;
+}
-  }
+
-
+.topbar-right {
-  .topbar-logo-img {
+  display: flex;
-    height: 2rem;
+  align-items: center;
-    width: auto;
-  }
-
-  .topbar-spacer {
-    width: 2.5rem;
-  }
-
-  .topbar-right {
-    display: flex;
-    align-items: center;
-  }
 }

pip-platform/Dockerfile

@@ -15,4 +15,4 @@ COPY . .
 
 EXPOSE 8000
 
-CMD ["python", "entrypoint.py"]
+CMD ["uvicorn", "src.main:app", "--host", "0.0.0.0", "--port", "8000", "--workers", "4", "--loop", "uvloop", "--http", "httptools"]

pip-platform/src/api/middleware/rate_limit.py

@@ -19,8 +19,7 @@ class RateLimitMiddleware(BaseHTTPMiddleware):
             return await call_next(request)
 
         path = request.url.path
-        exempt_prefixes = ("/docs", "/redoc", "/openapi", "/metrics", "/api/v1/system/health")
+        if path.startswith("/docs") or path.startswith("/redoc") or path.startswith("/openapi") or path.startswith("/metrics"):
-        if any(path.startswith(p) for p in exempt_prefixes):
             return await call_next(request)
 
         client_key = self._get_client_key(request)

pip-platform/tests/integration/test_api_key_auth.py

@@ -73,10 +73,8 @@ async def test_api_key_read_access():
         r2 = await c.get("/api/v1/medications", headers=api_h)
         assert r2.status_code == 200
 
-        if r.json()["total"] > 0:
+        r3 = await c.get("/api/v1/inventory", headers=api_h)
-            pharm_id = r.json()["items"][0]["id"]
+        assert r3.status_code == 200
-            r3 = await c.get(f"/api/v1/pharmacies/{pharm_id}/inventory", headers=api_h)
-            assert r3.status_code == 200
 
         print("  PASS: test_api_key_read_access")
 

pip-platform/tests/integration/test_rate_limiting.py

@@ -75,8 +75,19 @@ async def test_rate_limit_exempt_paths():
 
 async def test_rate_limit_per_client():
     async with httpx.AsyncClient(base_url=BASE_URL, timeout=30.0) as c:
+        token = await get_admin_token(c)
+        h = bearer_headers(token)
+
+        r0 = await c.get("/api/v1/pharmacies", headers=h)
+        limit = int(r0.headers["x-ratelimit-limit"])
+
+        for _ in range(limit + 5):
+            r = await c.get("/api/v1/pharmacies", headers=h)
+            if r.status_code == 429:
+                break
+
         r2 = await c.get("/api/v1/system/health")
-        assert r2.status_code == 200, "Health endpoint should work regardless of rate limit on other paths (it is exempt)"
+        assert r2.status_code == 200, "Health endpoint should work regardless of rate limit on other paths"
 
         print("  PASS: test_rate_limit_per_client")