user report gtound work

todos
user id -> user name
2026-03-19 03:37:15 +01:00 · 2026-03-19 01:49:07 +01:00 · 2026-03-19 01:37:10 +01:00 · 2026-03-19 01:32:18 +01:00 · 2026-03-19 01:29:09 +01:00 · 2026-03-19 00:57:04 +01:00
108 changed files with 14518 additions and 2480 deletions
@@ -14,6 +14,10 @@ RESEND_API_KEY=re_your_resend_api_key_here
 EMAIL_FROM=FitAI <noreply@yourdomain.com>
 EMAIL_REPLY_TO=support@yourdomain.com

+# Admin App URL (for invitation redirects)
+# Set to your production URL in production
+NEXT_PUBLIC_APP_URL=http://localhost:3000
+
 # Database (optional - defaults to ./fitai.db)
 DATABASE_PATH=./fitai.db

@@ -13,6 +13,7 @@
        "@fitai/shared": "file:../../packages/shared",
        "@hookform/resolvers": "^5.2.2",
        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-select": "^2.2.6",
        "@radix-ui/react-slot": "^1.2.4",
        "@react-email/components": "^1.0.8",
        "@react-email/render": "^2.0.4",
@@ -32,6 +33,8 @@
        "date-fns": "^4.1.0",
        "dotenv": "^17.2.3",
        "drizzle-orm": "^0.44.7",
+        "jspdf": "^4.2.1",
+        "jspdf-autotable": "^5.0.7",
        "lucide-react": "^0.553.0",
        "next": "^16.0.1",
        "pino": "^10.3.1",
@@ -574,10 +577,9 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.28.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
-      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
-      "dev": true,
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -1027,6 +1029,44 @@
      "resolved": "../../packages/shared",
      "link": true
    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
    "node_modules/@gar/promisify": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -2417,12 +2457,85 @@
        "url": "https://opencollective.com/pkgr"
      }
    },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
    "node_modules/@radix-ui/primitive": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
      "license": "MIT"
    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-compose-refs": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -2507,6 +2620,21 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-dismissable-layer": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
@@ -2592,6 +2720,38 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-portal": {
      "version": "1.1.9",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
@@ -2681,6 +2841,67 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-slot": {
      "version": "1.2.4",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
@@ -2784,6 +3005,86 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
    "node_modules/@react-email/body": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/@react-email/body/-/body-0.2.1.tgz",
@@ -3019,7 +3320,6 @@
      "resolved": "https://registry.npmjs.org/@react-email/render/-/render-2.0.4.tgz",
      "integrity": "sha512-kht2oTFQ1SwrLpd882ahTvUtNa9s53CERHstiTbzhm6aR2Hbykp/mQ4tpPvsBGkKAEvKRlDEoooh60Uk6nHK1g==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "html-to-text": "^9.0.5",
        "prettier": "^3.5.3"
@@ -3595,6 +3895,19 @@
        "undici-types": "~7.16.0"
      }
    },
+    "node_modules/@types/pako": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.4.tgz",
+      "integrity": "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/raf": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
+      "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/react": {
      "version": "19.2.2",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
@@ -3641,6 +3954,13 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/@types/use-sync-external-store": {
      "version": "0.0.6",
      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
@@ -4891,6 +5211,16 @@
      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
      "license": "MIT"
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/base64-js": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5268,6 +5598,26 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/canvg": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.11.tgz",
+      "integrity": "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@types/raf": "^3.4.0",
+        "core-js": "^3.8.3",
+        "raf": "^3.4.1",
+        "regenerator-runtime": "^0.13.7",
+        "rgbcolor": "^1.0.1",
+        "stackblur-canvas": "^2.0.0",
+        "svg-pathdata": "^6.0.3"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
    "node_modules/chalk": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5569,6 +5919,18 @@
        "node": ">=18"
      }
    },
+    "node_modules/core-js": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.49.0.tgz",
+      "integrity": "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5583,6 +5945,16 @@
        "node": ">= 8"
      }
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/css.escape": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -6092,6 +6464,16 @@
        "url": "https://github.com/fb55/domhandler?sponsor=1"
      }
    },
+    "node_modules/dompurify": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.3.3.tgz",
+      "integrity": "sha512-Oj6pzI2+RqBfFG+qOaOLbFXLQ90ARpcGG6UePL82bJLtdsa6CYJD7nmiU8MW9nQNOtCHV3lZ/Bzq1X0QYbBZCA==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optional": true,
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
    "node_modules/domutils": {
      "version": "3.2.2",
      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
@@ -7135,6 +7517,17 @@
      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
      "license": "MIT"
    },
+    "node_modules/fast-png": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/fast-png/-/fast-png-6.4.0.tgz",
+      "integrity": "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pako": "^2.0.3",
+        "iobuffer": "^5.3.2",
+        "pako": "^2.1.0"
+      }
+    },
    "node_modules/fast-safe-stringify": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -7166,6 +7559,12 @@
        "bser": "2.1.1"
      }
    },
+    "node_modules/fflate": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
+      "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==",
+      "license": "MIT"
+    },
    "node_modules/file-entry-cache": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -7907,6 +8306,20 @@
        "node": ">=14"
      }
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/htmlparser2": {
      "version": "8.0.2",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
@@ -8156,6 +8569,12 @@
        "node": ">=12"
      }
    },
+    "node_modules/iobuffer": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
+      "integrity": "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA==",
+      "license": "MIT"
+    },
    "node_modules/ip-address": {
      "version": "10.1.0",
      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -9897,6 +10316,33 @@
        "node": ">=6"
      }
    },
+    "node_modules/jspdf": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-4.2.1.tgz",
+      "integrity": "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.28.6",
+        "fast-png": "^6.2.0",
+        "fflate": "^0.8.1"
+      },
+      "optionalDependencies": {
+        "canvg": "^3.0.11",
+        "core-js": "^3.6.0",
+        "dompurify": "^3.3.1",
+        "html2canvas": "^1.0.0-rc.5"
+      }
+    },
+    "node_modules/jspdf-autotable": {
+      "version": "5.0.7",
+      "resolved": "https://registry.npmjs.org/jspdf-autotable/-/jspdf-autotable-5.0.7.tgz",
+      "integrity": "sha512-2wr7H6liNDBYNwt25hMQwXkEWFOEopgKIvR1Eukuw6Zmprm/ZcnmLTQEjW7Xx3FCbD3v7pflLcnMAv/h1jFDQw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "jspdf": "^2 || ^3 || ^4"
+      }
+    },
    "node_modules/jsx-ast-utils": {
      "version": "3.3.5",
      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -11119,6 +11565,12 @@
      "dev": true,
      "license": "BlueOak-1.0.0"
    },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
+    },
    "node_modules/parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11243,6 +11695,13 @@
        "url": "https://ko-fi.com/killymxi"
      }
    },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/picocolors": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -11810,6 +12269,16 @@
      "integrity": "sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==",
      "license": "MIT"
    },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
    "node_modules/rc": {
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
@@ -12102,6 +12571,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/regexp.prototype.flags": {
      "version": "1.5.4",
      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
@@ -12242,6 +12718,16 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/rgbcolor": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz",
+      "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==",
+      "license": "MIT OR SEE LICENSE IN FEEL-FREE.md",
+      "optional": true,
+      "engines": {
+        "node": ">= 0.8.15"
+      }
+    },
    "node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -12943,6 +13429,16 @@
        "node": ">=8"
      }
    },
+    "node_modules/stackblur-canvas": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz",
+      "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.1.14"
+      }
+    },
    "node_modules/standardwebhooks": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/standardwebhooks/-/standardwebhooks-1.0.0.tgz",
@@ -13333,6 +13829,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/svg-pathdata": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz",
+      "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/svix": {
      "version": "1.84.1",
      "resolved": "https://registry.npmjs.org/svix/-/svix-1.84.1.tgz",
@@ -13566,6 +14072,16 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/thenify": {
      "version": "3.3.1",
      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -14212,6 +14728,16 @@
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "license": "MIT"
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "node_modules/uuid": {
      "version": "10.0.0",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
@@ -19,6 +19,7 @@
    "@fitai/shared": "file:../../packages/shared",
    "@hookform/resolvers": "^5.2.2",
    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/react-slot": "^1.2.4",
    "@react-email/components": "^1.0.8",
    "@react-email/render": "^2.0.4",
@@ -38,6 +39,8 @@
    "date-fns": "^4.1.0",
    "dotenv": "^17.2.3",
    "drizzle-orm": "^0.44.7",
+    "jspdf": "^4.2.1",
+    "jspdf-autotable": "^5.0.7",
    "lucide-react": "^0.553.0",
    "next": "^16.0.1",
    "pino": "^10.3.1",
@@ -0,0 +1,167 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
+import { db as rawDb, sql } from "@fitai/database";
+import { getUsersByGym, getClientsByGym } from "@/lib/gym-context";
+
+interface UserGrowthPoint {
+  label: string;
+  value: number;
+}
+
+interface MembershipDistributionPoint {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface RevenuePoint {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface AnalyticsData {
+  userGrowth: UserGrowthPoint[];
+  membershipDistribution: MembershipDistributionPoint[];
+  revenue: RevenuePoint[];
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const database = await getDatabase();
+    const user = await ensureUserSynced(userId, database);
+
+    if (!user || (user.role !== "admin" && user.role !== "superAdmin")) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    const url = new URL(req.url);
+    const months = parseInt(url.searchParams.get("months") || "6");
+
+    // Get target gym based on role
+    const targetGymId =
+      user.role === "superAdmin"
+        ? (url.searchParams.get("gymId") ?? undefined)
+        : (user.gymId ?? undefined);
+
+    // Validate gym access for non-superAdmins
+    if (user.role !== "superAdmin" && !targetGymId) {
+      return NextResponse.json(
+        { error: "Forbidden - No gym assigned" },
+        { status: 403 },
+      );
+    }
+
+    // Get gym-scoped data
+    const allUsers = targetGymId
+      ? await getUsersByGym(targetGymId)
+      : await database.getAllUsers();
+
+    const allClients = targetGymId
+      ? await getClientsByGym(targetGymId)
+      : await database.getAllClients();
+
+    // For payments, we'd need a similar filter - for now, skip payments if gym-scoped
+    // TODO: Add getPaymentsByGym when needed
+    const paymentsRaw = targetGymId
+      ? [] // Skip payments for gym-scoped for now
+      : await rawDb.all(
+          sql`SELECT * FROM payments WHERE status = 'completed' AND paid_at IS NOT NULL`,
+        );
+    const payments: any[] = paymentsRaw || [];
+
+    const now = new Date();
+    const userGrowth: UserGrowthPoint[] = [];
+
+    for (let i = months - 1; i >= 0; i--) {
+      const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const monthLabel = date.toLocaleDateString("en-US", { month: "short" });
+
+      const usersCreatedByMonth = allUsers.filter((u: any) => {
+        const createdAt = new Date(u.createdAt);
+        return (
+          createdAt.getFullYear() === date.getFullYear() &&
+          createdAt.getMonth() === date.getMonth()
+        );
+      });
+
+      userGrowth.push({
+        label: monthLabel,
+        value: usersCreatedByMonth.length,
+      });
+    }
+
+    let runningTotal = 0;
+    for (const point of userGrowth) {
+      runningTotal += point.value;
+      point.value = runningTotal;
+    }
+
+    const membershipCounts: Record<string, number> = {
+      basic: 0,
+      premium: 0,
+      vip: 0,
+    };
+
+    for (const client of allClients) {
+      const membershipType = (client as any).membershipType || "basic";
+      if (membershipCounts[membershipType] !== undefined) {
+        membershipCounts[membershipType]++;
+      }
+    }
+
+    const membershipDistribution: MembershipDistributionPoint[] = [
+      { label: "Basic", value: membershipCounts.basic, color: "#6b7280" },
+      { label: "Premium", value: membershipCounts.premium, color: "#3b82f6" },
+      { label: "VIP", value: membershipCounts.vip, color: "#f59e0b" },
+    ];
+
+    const revenue: RevenuePoint[] = [];
+
+    for (let i = months - 1; i >= 0; i--) {
+      const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+      const monthLabel = date.toLocaleDateString("en-US", { month: "short" });
+      const nextMonthDate = new Date(
+        now.getFullYear(),
+        now.getMonth() - i + 1,
+        1,
+      );
+
+      const monthlyRevenue = payments
+        .filter((p: any) => {
+          const paidAt = p.paid_at ? new Date(p.paid_at) : null;
+          if (!paidAt) return false;
+          return paidAt >= date && paidAt < nextMonthDate;
+        })
+        .reduce((sum: number, p: any) => sum + (p.amount || 0), 0);
+
+      revenue.push({
+        label: monthLabel,
+        value: monthlyRevenue,
+        color: "#10b981",
+      });
+    }
+
+    const analyticsData: AnalyticsData = {
+      userGrowth,
+      membershipDistribution,
+      revenue,
+    };
+
+    return successResponse({ analytics: analyticsData });
+  } catch (error) {
+    console.error("Analytics error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -1,27 +1,68 @@
-import { auth } from '@clerk/nextjs/server'
-import { NextResponse } from 'next/server'
-import { getDatabase } from '@/lib/database'
-import { ensureUserSynced } from '@/lib/sync-user'
+import { auth } from "@clerk/nextjs/server";
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";
+import { getAttendanceByGym } from "@/lib/gym-context";

-export async function GET(req: Request) {
-    try {
-        const { userId } = await auth()
-        if (!userId) return new NextResponse('Unauthorized', { status: 401 })
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });

-        const db = await getDatabase()
+    const db = await getDatabase();
+    const user = await ensureUserSynced(userId, db);

-        // Ensure user is synced (handles seed script ID mismatch)
-        // We need to import ensureUserSynced
-        const user = await ensureUserSynced(userId, db)
-
-        if (!user || (user.role !== 'admin' && user.role !== 'superAdmin')) {
-            return new NextResponse('Forbidden', { status: 403 })
-        }
-
-        const attendance = await db.getAllAttendance()
-        return NextResponse.json(attendance)
-    } catch (error) {
-        console.error('Admin attendance error:', error)
-        return new NextResponse('Internal Server Error', { status: 500 })
+    if (!user || (user.role !== "admin" && user.role !== "superAdmin")) {
+      return new NextResponse("Forbidden", { status: 403 });
    }
+
+    // Get target gym based on role
+    const url = new URL(req.url);
+    const targetGymId =
+      user.role === "superAdmin"
+        ? (url.searchParams.get("gymId") ?? undefined)
+        : (user.gymId ?? undefined);
+
+    // Validate gym access for non-superAdmins
+    if (user.role !== "superAdmin" && !targetGymId) {
+      return new NextResponse("Forbidden - No gym assigned", { status: 403 });
+    }
+
+    // Get attendance filtered by gym
+    const attendance = targetGymId
+      ? await getAttendanceByGym(targetGymId)
+      : await db.getAllAttendance();
+
+    // Get all users to enrich attendance with user names
+    const allUsers = await db.getAllUsers();
+    const userMap = new Map(
+      allUsers.map((u) => [
+        u.id,
+        {
+          firstName: u.firstName,
+          lastName: u.lastName,
+          email: u.email,
+        },
+      ]),
+    );
+
+    // Enrich attendance records with user information
+    const enrichedAttendance = attendance.map((record) => {
+      const userInfo = userMap.get(record.userId);
+      return {
+        ...record,
+        userName: userInfo
+          ? `${userInfo.firstName} ${userInfo.lastName}`.trim() ||
+            userInfo.email
+          : record.userId,
+        userEmail: userInfo?.email,
+      };
+    });
+
+    return successResponse({ records: enrichedAttendance });
+  } catch (error) {
+    console.error("Admin attendance error:", error);
+    return new NextResponse("Internal Server Error", { status: 500 });
+  }
 }
@@ -2,6 +2,7 @@ import { auth } from "@clerk/nextjs/server";
 import { NextResponse } from "next/server";
 import { getDatabase } from "@/lib/database";
 import { ensureUserSynced } from "@/lib/sync-user";
+import { successResponse } from "@/lib/api/responses";

 export async function GET(req: Request) {
  try {
@@ -51,7 +52,7 @@ export async function GET(req: Request) {
      revenueGrowth: 0,
    };

-    return NextResponse.json(stats);
+    return successResponse({ stats });
  } catch (error) {
    console.error("Dashboard stats error:", error);
    return new NextResponse("Internal Server Error", { status: 500 });
@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+
+/**
+ * GET /api/fitness-profile/history
+ * Get fitness profile history for a user
+ *
+ * Query params:
+ * - userId: string (required)
+ * - startDate: YYYY-MM-DD (optional)
+ * - endDate: YYYY-MM-DD (optional)
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { userId: authUserId } = await auth();
+    if (!authUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const userId = searchParams.get("userId");
+    const startDateStr = searchParams.get("startDate");
+    const endDateStr = searchParams.get("endDate");
+
+    if (!userId) {
+      return NextResponse.json(
+        { error: "userId is required" },
+        { status: 400 },
+      );
+    }
+
+    // Convert date strings to Date objects if provided
+    const startDate = startDateStr ? new Date(startDateStr) : undefined;
+    const endDate = endDateStr ? new Date(endDateStr) : undefined;
+
+    const db = await getDatabase();
+    const history = await db.getFitnessProfileHistory(
+      userId,
+      startDate,
+      endDate,
+    );
+
+    return NextResponse.json({ history });
+  } catch (error) {
+    console.error("Get fitness profile history error:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,99 @@
+import { NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { eq, sql } from "@fitai/database";
+import { db, users as usersTable, gyms as gymsTable } from "@fitai/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import log from "@/lib/logger";
+
+async function ensureGymsTable() {
+  await db.run(sql`
+    CREATE TABLE IF NOT EXISTS gyms (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      location TEXT,
+      status TEXT NOT NULL CHECK (status IN ('active','inactive')) DEFAULT 'active',
+      admin_user_id TEXT NOT NULL,
+      created_at INTEGER NOT NULL,
+      updated_at INTEGER NOT NULL
+    )
+  `);
+}
+
+// DELETE /api/gyms/[id]
+// Delete a gym (soft delete - mark as inactive)
+export async function DELETE(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { id: gymId } = await params;
+    const { userId } = await auth();
+
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    // Ensure user is synced
+    const currentUser = await ensureUserSynced(userId, {
+      getUserById: async (id: string) => {
+        const row = await db
+          .select()
+          .from(usersTable)
+          .where(eq(usersTable.id, id))
+          .get();
+        return row
+          ? {
+              id: row.id,
+              email: row.email,
+              firstName: row.firstName,
+              lastName: row.lastName,
+              password: row.password ?? "",
+              phone: row.phone ?? undefined,
+              role: row.role,
+              imageUrl: undefined,
+              createdAt: new Date(row.createdAt),
+              updatedAt: new Date(row.updatedAt),
+            }
+          : null;
+      },
+    } as any);
+
+    // Only superAdmin can delete gyms
+    if (!currentUser || currentUser.role !== "superAdmin") {
+      return NextResponse.json(
+        { error: "Forbidden - Only superAdmin can delete gyms" },
+        { status: 403 },
+      );
+    }
+
+    await ensureGymsTable();
+
+    // Check if gym exists using Drizzle ORM
+    const existingGym = await db
+      .select()
+      .from(gymsTable)
+      .where(eq(gymsTable.id, gymId))
+      .get();
+
+    if (!existingGym) {
+      return NextResponse.json({ error: "Gym not found" }, { status: 404 });
+    }
+
+    // Soft delete - mark as inactive using Drizzle ORM
+    await db
+      .update(gymsTable)
+      .set({ status: "inactive", updatedAt: new Date() })
+      .where(eq(gymsTable.id, gymId));
+
+    return NextResponse.json({
+      success: true,
+      message: "Gym deleted successfully",
+    });
+  } catch (error) {
+    log.error("Failed to delete gym", error);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,113 @@
+import { NextResponse } from "next/server";
+import { eq, sql } from "@fitai/database";
+import { db, gyms as gymsTable } from "@fitai/database";
+import log from "@/lib/logger";
+
+async function ensureGymsTable() {
+  await db.run(sql`
+    CREATE TABLE IF NOT EXISTS gyms (
+      id TEXT PRIMARY KEY,
+      name TEXT NOT NULL,
+      location TEXT,
+      status TEXT NOT NULL CHECK (status IN ('active','inactive')) DEFAULT 'active',
+      admin_user_id TEXT NOT NULL,
+      created_at INTEGER NOT NULL,
+      updated_at INTEGER NOT NULL
+    )
+  `);
+}
+
+// GET /api/gyms/[id]/stats
+// Get stats for a specific gym
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { id: gymId } = await params;
+    await ensureGymsTable();
+
+    // Get gym info using Drizzle ORM
+    const gym = await db
+      .select()
+      .from(gymsTable)
+      .where(eq(gymsTable.id, gymId))
+      .get();
+
+    if (!gym) {
+      return NextResponse.json({ error: "Gym not found" }, { status: 404 });
+    }
+
+    // Get user counts
+    const usersResult = await db.all(
+      sql`SELECT role, COUNT(*) as count FROM users WHERE gym_id = ${gymId} GROUP BY role`,
+    );
+
+    const userCounts: Record<string, number> = {
+      admin: 0,
+      trainer: 0,
+      client: 0,
+    };
+    for (const row of usersResult as any[]) {
+      if (row.role in userCounts) {
+        userCounts[row.role] = row.count;
+      }
+    }
+
+    // Get client stats
+    const clientsResult = (await db.all(
+      sql`SELECT 
+        membership_type, 
+        membership_status, 
+        COUNT(*) as count 
+      FROM clients 
+      WHERE user_id IN (SELECT id FROM users WHERE gym_id = ${gymId})
+      GROUP BY membership_type, membership_status`,
+    )) as any[];
+
+    const membershipStats: Record<string, number> = {
+      basic: 0,
+      premium: 0,
+      vip: 0,
+    };
+    const activeClients = clientsResult.filter(
+      (c: any) => c.membership_status === "active",
+    );
+    for (const row of activeClients) {
+      if (row.membership_type in membershipStats) {
+        membershipStats[row.membership_type] = row.count;
+      }
+    }
+
+    // Get recent activity (attendance in last 30 days)
+    // Database stores timestamps in seconds, so convert milliseconds to seconds
+    const thirtyDaysAgo = Math.floor(Date.now() / 1000) - 30 * 24 * 60 * 60;
+    const attendanceResult = (await db.all(
+      sql`SELECT COUNT(*) as count FROM attendance 
+          WHERE user_id IN (SELECT id FROM users WHERE gym_id = ${gymId})
+          AND check_in_time > ${thirtyDaysAgo}`,
+    )) as any[];
+    const attendanceCount = attendanceResult[0]?.count || 0;
+
+    const stats = {
+      totalUsers: userCounts.admin + userCounts.trainer + userCounts.client,
+      admins: userCounts.admin,
+      trainers: userCounts.trainer,
+      clients: userCounts.client,
+      membershipStats,
+      activeClients: activeClients.reduce(
+        (sum: number, c: any) => sum + c.count,
+        0,
+      ),
+      attendanceLast30Days: attendanceCount,
+    };
+
+    return NextResponse.json({ gym, stats });
+  } catch (error) {
+    log.error("Failed to get gym stats", error);
+    return NextResponse.json(
+      { error: "Internal Server Error" },
+      { status: 500 },
+    );
+  }
+}
@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import { auth } from "@clerk/nextjs/server";
 import { eq, sql } from "@fitai/database";
-import { db, users as usersTable } from "@fitai/database";
+import { db, users as usersTable, gyms as gymsTable } from "@fitai/database";
 import { ensureUserSynced } from "@/lib/sync-user";
 import log from "@/lib/logger";

@@ -24,9 +24,12 @@ async function ensureGymsTable() {
 export async function GET() {
  try {
    await ensureGymsTable();
-    const rows = await db.all(
-      sql`SELECT * FROM gyms WHERE status = 'active' ORDER BY created_at DESC`,
-    );
+    const rows = await db
+      .select()
+      .from(gymsTable)
+      .where(eq(gymsTable.status, "active"))
+      .orderBy(sql`created_at DESC`)
+      .all();

    return NextResponse.json(rows);
  } catch (error) {
@@ -146,19 +149,30 @@ export async function POST(req: Request) {
    }

    const id = generateId();
-    const nowTs = Date.now();
+    const nowTs = new Date();

-    await db.run(
-      sql`INSERT INTO gyms (id, name, location, status, admin_user_id, created_at, updated_at)
-          VALUES (${id}, ${name}, ${location ?? null}, 'active', ${adminUserId!}, ${nowTs}, ${nowTs})`,
-    );
+    // Use Drizzle's insert method instead of raw SQL
+    await db.insert(gymsTable).values({
+      id,
+      name,
+      location: location ?? null,
+      status: "active",
+      adminUserId: adminUserId!,
+      createdAt: nowTs,
+      updatedAt: nowTs,
+    });

    // Assign the admin to this gym immediately after creation
-    await db.run(
-      sql`UPDATE users SET gym_id = ${id}, updated_at = ${nowTs} WHERE id = ${adminUserId!}`,
-    );
+    await db
+      .update(usersTable)
+      .set({ gymId: id, updatedAt: nowTs })
+      .where(eq(usersTable.id, adminUserId!));

-    const created = await db.get(sql`SELECT * FROM gyms WHERE id = ${id}`);
+    const created = await db
+      .select()
+      .from(gymsTable)
+      .where(eq(gymsTable.id, id))
+      .get();
    return NextResponse.json(created, { status: 201 });
  } catch (error) {
    log.error("Failed to create gym", error);
@@ -0,0 +1,138 @@
+import { auth } from "@clerk/nextjs/server";
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import log from "@/lib/logger";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const body = await req.json();
+    const { date, entries, totalWater, waterGoal } = body;
+
+    if (!date) {
+      return NextResponse.json({ error: "Date is required" }, { status: 400 });
+    }
+
+    // Check if entry already exists for this date
+    const existing = await db.getDailyHydration(userId, date);
+
+    let result;
+    if (existing) {
+      // Update existing entry
+      result = await db.updateDailyHydration(existing.id, {
+        entries,
+        totalWater: totalWater ?? existing.totalWater,
+        waterGoal: waterGoal ?? existing.waterGoal,
+      });
+    } else {
+      // Create new entry
+      result = await db.createDailyHydration({
+        userId,
+        date,
+        entries: entries || [],
+        totalWater: totalWater || 0,
+        waterGoal: waterGoal || 2000,
+      });
+    }
+
+    return NextResponse.json(result);
+  } catch (error) {
+    log.error("Failed to save hydration data", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const url = new URL(req.url);
+    const date = url.searchParams.get("date");
+    const startDate = url.searchParams.get("startDate");
+    const endDate = url.searchParams.get("endDate");
+
+    // Single date query
+    if (date) {
+      const result = await db.getDailyHydration(userId, date);
+      return NextResponse.json(result);
+    }
+
+    // Date range query
+    if (startDate && endDate) {
+      const results = await db.getDailyHydrationRange(
+        userId,
+        startDate,
+        endDate,
+      );
+      return NextResponse.json(results);
+    }
+
+    return NextResponse.json(
+      { error: "Either 'date' or 'startDate' and 'endDate' are required" },
+      { status: 400 },
+    );
+  } catch (error) {
+    log.error("Failed to fetch hydration data", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const url = new URL(req.url);
+    const id = url.searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json({ error: "ID is required" }, { status: 400 });
+    }
+
+    // Verify ownership before deletion
+    const existing = await db.getDailyHydrationById(id);
+    if (!existing) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+
+    if (existing.userId !== userId) {
+      return NextResponse.json(
+        { error: "Forbidden: You can only delete your own hydration data" },
+        { status: 403 },
+      );
+    }
+
+    const success = await db.deleteDailyHydration(id);
+
+    if (success) {
+      return NextResponse.json({ success: true });
+    } else {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+  } catch (error) {
+    log.error("Failed to delete hydration data", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth, clerkClient } from "@clerk/nextjs/server";
+import log from "@/lib/logger";
+
+/**
+ * POST /api/invitations/[id]/resend
+ *
+ * Resend an invitation with same parameters
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { id: invitationId } = await params;
+
+    // Fetch pending invitations to find the one being resent
+    const client = await clerkClient();
+    const invitationList = await client.invitations.getInvitationList({
+      status: "pending",
+    });
+
+    // Find the invitation
+    const invitation = invitationList.data.find(
+      (inv) => inv.id === invitationId,
+    );
+
+    if (!invitation) {
+      return NextResponse.json(
+        { error: "Invitation not found or already processed" },
+        { status: 404 },
+      );
+    }
+
+    const metadata = invitation.publicMetadata as any;
+
+    // Check if current user created this invitation
+    if (metadata?.createdBy !== userId) {
+      return NextResponse.json(
+        { error: "Forbidden - You can only resend invitations you created" },
+        { status: 403 },
+      );
+    }
+
+    // Create new invitation with same parameters
+    const role = metadata?.role;
+
+    // Determine redirect URL based on role
+    const isStaffRole = ["admin", "trainer", "superAdmin"].includes(role);
+    const redirectUrl = isStaffRole
+      ? `${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/sign-up`
+      : undefined;
+
+    const newInvitation = await client.invitations.createInvitation({
+      emailAddress: invitation.emailAddress,
+      publicMetadata: invitation.publicMetadata || undefined,
+      redirectUrl,
+      ignoreExisting: true,
+    });
+
+    log.info("Invitation resent", {
+      originalId: invitationId,
+      newId: newInvitation.id,
+      email: invitation.emailAddress,
+      resentBy: userId,
+    });
+
+    return NextResponse.json({
+      data: {
+        invitation: {
+          id: newInvitation.id,
+          email: newInvitation.emailAddress,
+          status: newInvitation.status,
+        },
+      },
+    });
+  } catch (error) {
+    log.error("POST /api/invitations/[id]/resend error:", error);
+    return NextResponse.json(
+      { error: "Failed to resend invitation" },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,69 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth, clerkClient } from "@clerk/nextjs/server";
+import log from "@/lib/logger";
+
+/**
+ * DELETE /api/invitations/[id]
+ *
+ * Revoke a pending invitation (creator-only permission)
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const { id: invitationId } = await params;
+
+    // Fetch pending invitations to find and verify the one being revoked
+    const client = await clerkClient();
+    const invitationList = await client.invitations.getInvitationList({
+      status: "pending",
+    });
+
+    // Find the invitation
+    const invitation = invitationList.data.find(
+      (inv) => inv.id === invitationId,
+    );
+
+    if (!invitation) {
+      return NextResponse.json(
+        { error: "Invitation not found or already processed" },
+        { status: 404 },
+      );
+    }
+
+    const metadata = invitation.publicMetadata as any;
+
+    // Check if current user created this invitation
+    if (metadata?.createdBy !== userId) {
+      return NextResponse.json(
+        { error: "Forbidden - You can only cancel invitations you created" },
+        { status: 403 },
+      );
+    }
+
+    // Revoke the invitation
+    await client.invitations.revokeInvitation(invitationId);
+
+    log.info("Invitation revoked", {
+      invitationId,
+      revokedBy: userId,
+      email: invitation.emailAddress,
+    });
+
+    return NextResponse.json({
+      data: { success: true },
+    });
+  } catch (error) {
+    log.error("DELETE /api/invitations/[id] error:", error);
+    return NextResponse.json(
+      { error: "Failed to revoke invitation" },
+      { status: 500 },
+    );
+  }
+}
@@ -1,5 +1,90 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 import { auth, clerkClient } from "@clerk/nextjs/server";
+import { getAuthContext } from "@/lib/auth/context";
+import { validateGymAccess } from "@/lib/auth/permissions";
+import log from "@/lib/logger";
+
+/**
+ * GET /api/invitations
+ *
+ * Fetch pending invitations with gym and creator filtering.
+ * Users can only see invitations they created, scoped to their gym access.
+ *
+ * Query params:
+ * - gymId: Optional gym filter (superAdmin only)
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    // Get auth context
+    const authContext = await getAuthContext();
+    const { role, gymId: userGymId } = authContext;
+
+    // Get query params
+    const { searchParams } = new URL(request.url);
+    const gymIdParam = searchParams.get("gymId");
+
+    // Validate gym access
+    const targetGymId = gymIdParam || undefined;
+    const accessError = validateGymAccess(role, userGymId, targetGymId);
+    if (accessError) return accessError;
+
+    // Fetch all pending invitations from Clerk
+    const client = await clerkClient();
+    const invitationList = await client.invitations.getInvitationList({
+      status: "pending",
+    });
+
+    // Filter invitations based on:
+    // 1. Creator (only show invitations created by current user)
+    // 2. Gym (apply gym-scoping rules)
+    const filteredInvitations = invitationList.data
+      .filter((inv) => {
+        const metadata = inv.publicMetadata as any;
+
+        // Creator filter: only show if user created it
+        if (metadata?.createdBy !== userId) {
+          return false;
+        }
+
+        // Gym filter: SuperAdmin can see all, others only their gym
+        if (role === "superAdmin") {
+          // If gymId param provided, filter by it
+          if (targetGymId && (metadata?.gymId ?? null) !== targetGymId) {
+            return false;
+          }
+          return true;
+        } else {
+          // Non-superAdmins: must match their gym (normalize null/undefined)
+          return (metadata?.gymId ?? null) === (userGymId ?? null);
+        }
+      })
+      .map((inv) => ({
+        id: inv.id,
+        emailAddress: inv.emailAddress,
+        publicMetadata: inv.publicMetadata,
+        status: inv.status,
+        url: inv.url,
+        createdAt: inv.createdAt,
+        updatedAt: inv.updatedAt,
+        revoked: inv.revoked,
+      }));
+
+    return NextResponse.json({
+      data: { invitations: filteredInvitations },
+    });
+  } catch (error) {
+    log.error("GET /api/invitations error:", error);
+    return NextResponse.json(
+      { error: "Failed to fetch invitations" },
+      { status: 500 },
+    );
+  }
+}

 /**
 * POST /api/invitations
@@ -129,9 +214,9 @@ export async function POST(req: Request) {
    const invitation = await client.invitations.createInvitation({
      emailAddress: inviteeEmail,
      publicMetadata: {
-        roleAssigned,
+        role: roleAssigned,
        gymId: gymIdForInvite,
-        inviterUserId: inviter.id,
+        createdBy: inviter.id,
      },
    });

@@ -0,0 +1,126 @@
+import { auth } from "@clerk/nextjs/server";
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import log from "@/lib/logger";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const body = await req.json();
+    const {
+      dailyNutritionId,
+      mealType,
+      foodName,
+      calories,
+      protein,
+      carbs,
+      fats,
+    } = body;
+
+    if (!mealType || !foodName || calories === undefined) {
+      return NextResponse.json(
+        { error: "mealType, foodName, and calories are required" },
+        { status: 400 },
+      );
+    }
+
+    const result = await db.createMealEntry({
+      userId,
+      dailyNutritionId,
+      mealType,
+      foodName,
+      calories,
+      protein,
+      carbs,
+      fats,
+      timestamp: new Date(),
+    });
+
+    return NextResponse.json(result);
+  } catch (error) {
+    log.error("Failed to create meal entry", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const url = new URL(req.url);
+    const date = url.searchParams.get("date");
+
+    if (!date) {
+      return NextResponse.json(
+        { error: "date is required (YYYY-MM-DD format)" },
+        { status: 400 },
+      );
+    }
+
+    const results = await db.getMealEntriesByDate(userId, date);
+    return NextResponse.json(results);
+  } catch (error) {
+    log.error("Failed to fetch meal entries", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const url = new URL(req.url);
+    const id = url.searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json({ error: "ID is required" }, { status: 400 });
+    }
+
+    // Verify ownership before deletion
+    const existing = await db.getMealEntryById(id);
+    if (!existing) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+
+    if (existing.userId !== userId) {
+      return NextResponse.json(
+        { error: "Forbidden: You can only delete your own meal entries" },
+        { status: 403 },
+      );
+    }
+
+    const success = await db.deleteMealEntry(id);
+
+    if (success) {
+      return NextResponse.json({ success: true });
+    } else {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+  } catch (error) {
+    log.error("Failed to delete meal entry", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,138 @@
+import { auth } from "@clerk/nextjs/server";
+import { NextRequest, NextResponse } from "next/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import log from "@/lib/logger";
+
+export async function POST(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const body = await req.json();
+    const { date, meals, totalCalories, calorieGoal } = body;
+
+    if (!date) {
+      return NextResponse.json({ error: "Date is required" }, { status: 400 });
+    }
+
+    // Check if entry already exists for this date
+    const existing = await db.getDailyNutrition(userId, date);
+
+    let result;
+    if (existing) {
+      // Update existing entry
+      result = await db.updateDailyNutrition(existing.id, {
+        meals,
+        totalCalories: totalCalories ?? existing.totalCalories,
+        calorieGoal: calorieGoal ?? existing.calorieGoal,
+      });
+    } else {
+      // Create new entry
+      result = await db.createDailyNutrition({
+        userId,
+        date,
+        meals: meals || [],
+        totalCalories: totalCalories || 0,
+        calorieGoal: calorieGoal || 2000,
+      });
+    }
+
+    return NextResponse.json(result);
+  } catch (error) {
+    log.error("Failed to save nutrition data", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function GET(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const url = new URL(req.url);
+    const date = url.searchParams.get("date");
+    const startDate = url.searchParams.get("startDate");
+    const endDate = url.searchParams.get("endDate");
+
+    // Single date query
+    if (date) {
+      const result = await db.getDailyNutrition(userId, date);
+      return NextResponse.json(result);
+    }
+
+    // Date range query
+    if (startDate && endDate) {
+      const results = await db.getDailyNutritionRange(
+        userId,
+        startDate,
+        endDate,
+      );
+      return NextResponse.json(results);
+    }
+
+    return NextResponse.json(
+      { error: "Either 'date' or 'startDate' and 'endDate' are required" },
+      { status: 400 },
+    );
+  } catch (error) {
+    log.error("Failed to fetch nutrition data", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(req: NextRequest) {
+  try {
+    const { userId } = await auth();
+    if (!userId) return new NextResponse("Unauthorized", { status: 401 });
+
+    const db = await getDatabase();
+    await ensureUserSynced(userId, db);
+
+    const url = new URL(req.url);
+    const id = url.searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json({ error: "ID is required" }, { status: 400 });
+    }
+
+    // Verify ownership before deletion
+    const existing = await db.getDailyNutritionById(id);
+    if (!existing) {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+
+    if (existing.userId !== userId) {
+      return NextResponse.json(
+        { error: "Forbidden: You can only delete your own nutrition data" },
+        { status: 403 },
+      );
+    }
+
+    const success = await db.deleteDailyNutrition(id);
+
+    if (success) {
+      return NextResponse.json({ success: true });
+    } else {
+      return NextResponse.json({ error: "Not found" }, { status: 404 });
+    }
+  } catch (error) {
+    log.error("Failed to delete nutrition data", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -1,11 +1,14 @@
 import { NextRequest, NextResponse } from "next/server";
 import { getDatabase } from "../../../../lib/database/index";
+import { auth } from "@clerk/nextjs/server";
 import log from "@/lib/logger";
 import { fitnessProfileSchema } from "@/lib/validation/schemas";
 import {
  validateRequestBody,
  validationErrorResponse,
 } from "@/lib/validation/helpers";
+import { getFitnessProfilesByGym } from "@/lib/gym-context";
+import { ensureUserSynced } from "@/lib/sync-user";

 export async function POST(request: NextRequest) {
  try {
@@ -63,12 +66,47 @@ export async function POST(request: NextRequest) {

 export async function GET(request: NextRequest) {
  try {
-    const db = await getDatabase();
-    const { searchParams } = new URL(request.url);
-    const userId = searchParams.get("userId");
+    // First authenticate
+    const { userId: clerkUserId } = await auth();
+    if (!clerkUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }

-    if (userId) {
-      const profile = await db.getFitnessProfileByUserId(userId);
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(clerkUserId, db);
+
+    if (!currentUser) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    const { searchParams } = new URL(request.url);
+    const targetUserId = searchParams.get("userId");
+
+    // If accessing another user's profile, verify gym access
+    if (targetUserId && targetUserId !== clerkUserId) {
+      const isStaff =
+        currentUser.role === "admin" ||
+        currentUser.role === "superAdmin" ||
+        currentUser.role === "trainer";
+
+      if (!isStaff) {
+        return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+      }
+
+      // Staff need to verify target user is in same gym
+      if (currentUser.role !== "superAdmin") {
+        const targetUser = await db.getUserById(targetUserId);
+        if (!targetUser || targetUser.gymId !== currentUser.gymId) {
+          return NextResponse.json(
+            { error: "Forbidden - Cannot access users from other gyms" },
+            { status: 403 },
+          );
+        }
+      }
+    }
+
+    if (targetUserId) {
+      const profile = await db.getFitnessProfileByUserId(targetUserId);
      if (!profile) {
        return NextResponse.json(
          { error: "Profile not found" },
@@ -78,8 +116,28 @@ export async function GET(request: NextRequest) {
      return NextResponse.json({ profile });
    }

-    const profiles = await db.getAllFitnessProfiles();
-    return NextResponse.json({ profiles });
+    // Staff get gym-scoped profiles
+    const isStaff =
+      currentUser.role === "admin" ||
+      currentUser.role === "superAdmin" ||
+      currentUser.role === "trainer";
+
+    if (isStaff) {
+      const targetGymId =
+        currentUser.role === "superAdmin"
+          ? (searchParams.get("gymId") ?? undefined)
+          : (currentUser.gymId ?? undefined);
+
+      const profiles = targetGymId
+        ? await getFitnessProfilesByGym(targetGymId)
+        : await db.getAllFitnessProfiles();
+
+      return NextResponse.json({ profiles });
+    }
+
+    // Regular users only get their own
+    const profile = await db.getFitnessProfileByUserId(clerkUserId);
+    return NextResponse.json({ profile: profile ? [profile] : [] });
  } catch (error) {
    log.error("Failed to get fitness profiles", error);
    return NextResponse.json(
@@ -17,6 +17,8 @@ import {
  badRequestResponse,
  internalErrorResponse,
 } from "@/lib/api/responses";
+import { getRecommendationsByGym } from "@/lib/gym-context";
+import { ensureUserSynced } from "@/lib/sync-user";

 export async function GET(request: NextRequest) {
  try {
@@ -25,38 +27,59 @@ export async function GET(request: NextRequest) {
      return unauthorizedResponse();
    }

+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(currentUserId, db);
+
+    if (!currentUser) {
+      return forbiddenResponse("User not found");
+    }
+
    const { searchParams } = new URL(request.url);
    const targetUserId = searchParams.get("userId");

-    const db = await getDatabase();
-
-    // If no userId provided, check if staff and return all recommendations
+    // If no userId provided, staff gets gym-scoped recommendations
    if (!targetUserId) {
-      const currentUser = await db.getUserById(currentUserId);
      const isStaff =
-        currentUser?.role === "admin" ||
-        currentUser?.role === "superAdmin" ||
-        currentUser?.role === "trainer";
+        currentUser.role === "admin" ||
+        currentUser.role === "superAdmin" ||
+        currentUser.role === "trainer";

      if (!isStaff) {
        return badRequestResponse("User ID is required");
      }

-      const recommendations = await db.getAllRecommendations();
+      // Get target gym based on role
+      const targetGymId =
+        currentUser.role === "superAdmin"
+          ? (searchParams.get("gymId") ?? undefined)
+          : (currentUser.gymId ?? undefined);
+
+      // Get recommendations filtered by gym
+      const recommendations = targetGymId
+        ? await getRecommendationsByGym(targetGymId)
+        : await db.getAllRecommendations();
+
      return successResponse({ recommendations });
    }

-    // Check permissions: Users can view their own, Admins/Trainers can view anyone's
-    const currentUser = await db.getUserById(currentUserId);
+    // Check permissions: Users can view their own, Admins/Trainers can view anyone's in their gym
    const isStaff =
-      currentUser?.role === "admin" ||
-      currentUser?.role === "superAdmin" ||
-      currentUser?.role === "trainer";
+      currentUser.role === "admin" ||
+      currentUser.role === "superAdmin" ||
+      currentUser.role === "trainer";

    if (currentUserId !== targetUserId) {
      if (!isStaff) {
        return forbiddenResponse();
      }
+
+      // Staff need to verify target user is in same gym
+      if (currentUser.role !== "superAdmin") {
+        const targetUser = await db.getUserById(targetUserId);
+        if (!targetUser || targetUser.gymId !== currentUser.gymId) {
+          return forbiddenResponse("Cannot access users from other gyms");
+        }
+      }
    }

    let recommendations = await db.getRecommendationsByUserId(targetUserId);
@@ -0,0 +1,373 @@
+/**
+ * Report Generation API Tests
+ *
+ * Tests for /api/reports/user/[userId] endpoint
+ *
+ * Test Coverage:
+ * 1. Access Control (client, trainer, admin, superAdmin)
+ * 2. Data Aggregation (attendance, nutrition, hydration, goals)
+ * 3. PDF Generation
+ * 4. Date Range Validation
+ */
+
+import { describe, it, expect, beforeAll, afterAll } from "@jest/globals";
+
+// Mock database
+const mockDatabase = {
+  getUserById: jest.fn(),
+  getClientByUserId: jest.fn(),
+  getFitnessProfileByUserId: jest.fn(),
+  getAttendanceByWeek: jest.fn(),
+  getDailyNutritionRange: jest.fn(),
+  getDailyHydrationRange: jest.fn(),
+  getFitnessGoalsByUserId: jest.fn(),
+  getFitnessProfileHistory: jest.fn(),
+  getRecommendationsByUserId: jest.fn(),
+  getTrainerClientAssignments: jest.fn(),
+};
+
+// Mock user data
+const mockUsers = {
+  client: {
+    id: "user_client_123",
+    email: "client@example.com",
+    firstName: "John",
+    lastName: "Client",
+    role: "client",
+    gymId: "gym_123",
+  },
+  trainer: {
+    id: "user_trainer_456",
+    email: "trainer@example.com",
+    firstName: "Jane",
+    lastName: "Trainer",
+    role: "trainer",
+    gymId: "gym_123",
+  },
+  admin: {
+    id: "user_admin_789",
+    email: "admin@example.com",
+    firstName: "Admin",
+    lastName: "User",
+    role: "admin",
+    gymId: "gym_123",
+  },
+  superAdmin: {
+    id: "user_superadmin_000",
+    email: "superadmin@example.com",
+    firstName: "Super",
+    lastName: "Admin",
+    role: "superAdmin",
+    gymId: undefined,
+  },
+};
+
+describe("Report Generation API", () => {
+  describe("Access Control", () => {
+    it("should allow clients to view their own reports", async () => {
+      const currentUser = mockUsers.client;
+      const targetUserId = mockUsers.client.id;
+
+      // Users can always view their own reports
+      const hasAccess = currentUser.id === targetUserId;
+      expect(hasAccess).toBe(true);
+    });
+
+    it("should allow trainers to view assigned client reports", async () => {
+      const currentUser = mockUsers.trainer;
+      const targetUserId = mockUsers.client.id;
+
+      // Mock assignment exists
+      mockDatabase.getTrainerClientAssignments.mockResolvedValue([
+        {
+          trainerId: currentUser.id,
+          clientId: targetUserId,
+          isActive: true,
+        },
+      ]);
+
+      const assignments = await mockDatabase.getTrainerClientAssignments(
+        currentUser.id,
+      );
+      const assignment = assignments.find(
+        (a: any) => a.clientId === targetUserId && a.isActive,
+      );
+      const hasAccess = !!assignment;
+
+      expect(hasAccess).toBe(true);
+    });
+
+    it("should deny trainers access to non-assigned client reports", async () => {
+      const currentUser = mockUsers.trainer;
+      const targetUserId = "user_other_client_999";
+
+      mockDatabase.getTrainerClientAssignments.mockResolvedValue([]);
+
+      const assignments = await mockDatabase.getTrainerClientAssignments(
+        currentUser.id,
+      );
+      const assignment = assignments.find(
+        (a: any) => a.clientId === targetUserId && a.isActive,
+      );
+      const hasAccess = !!assignment;
+
+      expect(hasAccess).toBe(false);
+    });
+
+    it("should allow admins to view clients in their gym", async () => {
+      const currentUser = mockUsers.admin;
+      const targetUser = { ...mockUsers.client, gymId: "gym_123" };
+
+      mockDatabase.getUserById.mockResolvedValue(targetUser);
+
+      const user = await mockDatabase.getUserById(targetUser.id);
+      const hasAccess = user?.gymId === currentUser.gymId;
+
+      expect(hasAccess).toBe(true);
+    });
+
+    it("should deny admins access to clients outside their gym", async () => {
+      const currentUser = mockUsers.admin;
+      const targetUser = { ...mockUsers.client, gymId: "gym_other_999" };
+
+      mockDatabase.getUserById.mockResolvedValue(targetUser);
+
+      const user = await mockDatabase.getUserById(targetUser.id);
+      const hasAccess = user?.gymId === currentUser.gymId;
+
+      expect(hasAccess).toBe(false);
+    });
+
+    it("should allow superAdmins to view any user", async () => {
+      const currentUser = mockUsers.superAdmin;
+
+      // SuperAdmins bypass gym checks
+      const hasAccess = currentUser.role === "superAdmin";
+
+      expect(hasAccess).toBe(true);
+    });
+
+    it("should deny clients access to other users reports", async () => {
+      const currentUser = mockUsers.client;
+      const targetUserId = "user_other_123";
+
+      // Only own ID or specific permissions
+      const hasAccess = currentUser.id === targetUserId;
+
+      expect(hasAccess).toBe(false);
+    });
+  });
+
+  describe("Date Range Validation", () => {
+    it("should accept valid date format YYYY-MM-DD", () => {
+      const validDates = ["2024-01-01", "2024-12-31", "2024-06-15"];
+
+      validDates.forEach((date) => {
+        const parsed = Date.parse(date);
+        expect(isNaN(parsed)).toBe(false);
+      });
+    });
+
+    it("should reject invalid date formats", () => {
+      const invalidDates = ["01-01-2024", "2024/01/01", "2024-1-1", "invalid"];
+
+      invalidDates.forEach((date) => {
+        const parsed = Date.parse(date);
+        expect(isNaN(parsed)).toBe(true);
+      });
+    });
+
+    it("should default to last 30 days if no dates provided", () => {
+      const endDate = new Date();
+      const startDate = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
+
+      const daysDiff = Math.ceil(
+        (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24),
+      );
+
+      expect(daysDiff).toBe(30);
+    });
+  });
+
+  describe("Data Aggregation", () => {
+    it("should aggregate weekly check-ins correctly", () => {
+      const attendanceRecords = [
+        {
+          checkInTime: new Date("2024-01-02T10:00:00"),
+          checkOutTime: new Date("2024-01-02T11:00:00"),
+          type: "gym",
+        },
+        {
+          checkInTime: new Date("2024-01-03T14:00:00"),
+          checkOutTime: new Date("2024-01-03T15:30:00"),
+          type: "gym",
+        },
+        {
+          checkInTime: new Date("2024-01-04T09:00:00"),
+          checkOutTime: null, // Still checked in
+          type: "class",
+        },
+      ];
+
+      const totalCheckIns = attendanceRecords.length;
+      const completedCheckIns = attendanceRecords.filter(
+        (r) => r.checkOutTime,
+      ).length;
+
+      expect(totalCheckIns).toBe(3);
+      expect(completedCheckIns).toBe(2);
+    });
+
+    it("should calculate total time spent correctly", () => {
+      const attendanceRecords = [
+        {
+          checkInTime: new Date("2024-01-02T10:00:00"),
+          checkOutTime: new Date("2024-01-02T11:30:00"), // 90 minutes
+        },
+        {
+          checkInTime: new Date("2024-01-03T14:00:00"),
+          checkOutTime: new Date("2024-01-03T15:00:00"), // 60 minutes
+        },
+      ];
+
+      const totalMinutes = attendanceRecords.reduce((sum, record) => {
+        if (record.checkOutTime) {
+          const duration =
+            record.checkOutTime.getTime() - record.checkInTime.getTime();
+          return sum + Math.floor(duration / 60000);
+        }
+        return sum;
+      }, 0);
+
+      expect(totalMinutes).toBe(150);
+    });
+
+    it("should handle nutrition goal achievement correctly", () => {
+      const nutritionRecords = [
+        { date: "2024-01-01", totalCalories: 2100, calorieGoal: 2000 },
+        { date: "2024-01-02", totalCalories: 1900, calorieGoal: 2000 },
+        { date: "2024-01-03", totalCalories: 2200, calorieGoal: 2000 },
+      ];
+
+      const daysMetGoal = nutritionRecords.filter((record) => {
+        const lowerBound = record.calorieGoal * 0.9;
+        const upperBound = record.calorieGoal * 1.1;
+        return (
+          record.totalCalories >= lowerBound &&
+          record.totalCalories <= upperBound
+        );
+      }).length;
+
+      expect(daysMetGoal).toBe(3); // All within ±10%
+    });
+
+    it("should handle hydration goal achievement correctly", () => {
+      const hydrationRecords = [
+        { date: "2024-01-01", totalWater: 2500, waterGoal: 2000 }, // 125%
+        { date: "2024-01-02", totalWater: 1800, waterGoal: 2000 }, // 90%
+        { date: "2024-01-03", totalWater: 2000, waterGoal: 2000 }, // 100%
+      ];
+
+      const daysMetGoal = hydrationRecords.filter(
+        (record) => record.totalWater / record.waterGoal >= 1,
+      ).length;
+
+      expect(daysMetGoal).toBe(2); // Days 1 and 3 meet goal
+    });
+  });
+
+  describe("Report Structure", () => {
+    it("should include all required sections", () => {
+      const requiredSections = [
+        "userId",
+        "user",
+        "client",
+        "fitnessProfile",
+        "reportPeriod",
+        "weeklyCheckIns",
+        "nutrition",
+        "hydration",
+        "goals",
+        "profileHistory",
+        "recommendations",
+        "generatedAt",
+      ];
+
+      // Mock report object
+      const report = {
+        userId: "user_123",
+        user: {},
+        client: null,
+        fitnessProfile: null,
+        reportPeriod: { startDate: "", endDate: "" },
+        weeklyCheckIns: [],
+        nutrition: {
+          dailySummaries: [],
+          averageDailyCalories: 0,
+          totalDays: 0,
+          daysMetGoal: 0,
+        },
+        hydration: {
+          dailySummaries: [],
+          averageDailyWater: 0,
+          totalDays: 0,
+          daysMetGoal: 0,
+        },
+        goals: {
+          active: [],
+          completed: [],
+          totalActive: 0,
+          totalCompleted: 0,
+          averageProgress: 0,
+        },
+        profileHistory: [],
+        recommendations: {
+          accepted: [],
+          rejected: [],
+          pending: [],
+          totalAccepted: 0,
+          totalRejected: 0,
+          totalPending: 0,
+        },
+        generatedAt: new Date(),
+      };
+
+      requiredSections.forEach((section) => {
+        expect(report).toHaveProperty(section);
+      });
+    });
+  });
+});
+
+describe("ISO Week Calculations", () => {
+  it("should start week on Monday", () => {
+    // Test dates
+    const dates = [
+      { date: "2024-01-01", expectedMonday: "2024-01-01" }, // Monday
+      { date: "2024-01-02", expectedMonday: "2024-01-01" }, // Tuesday
+      { date: "2024-01-03", expectedMonday: "2024-01-01" }, // Wednesday
+      { date: "2024-01-07", expectedMonday: "2024-01-01" }, // Sunday
+      { date: "2024-01-08", expectedMonday: "2024-01-08" }, // Monday (next week)
+    ];
+
+    dates.forEach(({ date, expectedMonday }) => {
+      const current = new Date(date);
+      const day = current.getDay();
+      const diff = current.getDate() - day + (day === 0 ? -6 : 1);
+      const monday = new Date(current);
+      monday.setDate(diff);
+
+      const mondayStr = monday.toISOString().split("T")[0];
+      expect(mondayStr).toBe(expectedMonday);
+    });
+  });
+
+  it("should end week on Sunday", () => {
+    const monday = new Date("2024-01-01");
+    const sunday = new Date(monday);
+    sunday.setDate(sunday.getDate() + 6);
+
+    const sundayStr = sunday.toISOString().split("T")[0];
+    expect(sundayStr).toBe("2024-01-07");
+  });
+});
@@ -0,0 +1,425 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import log from "@/lib/logger";
+import type {
+  UserReport,
+  WeeklyCheckInStats,
+  NutritionSummary,
+  HydrationSummary,
+  GoalSummary,
+  ProfileChangeSummary,
+  RecommendationSummary,
+  AttendanceType,
+} from "@fitai/shared";
+import { ATTENDANCE_TYPES } from "@fitai/shared";
+import { generateReportPDFBase64 } from "@/lib/pdf/report-helpers";
+
+/**
+ * GET /api/reports/user/[userId]
+ * Generate a comprehensive user report
+ *
+ * Query params:
+ * - userId: string (required) - Target user ID
+ * - startDate: YYYY-MM-DD (optional, default: 30 days ago)
+ * - endDate: YYYY-MM-DD (optional, default: today)
+ *
+ * Access Control:
+ * - Admins: Can generate reports for any user in their gym
+ * - Trainers: Can generate reports for their assigned clients only
+ * - Users: Can only generate reports for themselves
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ userId: string }> },
+) {
+  try {
+    const { userId: clerkUserId } = await auth();
+    if (!clerkUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(clerkUserId, db);
+
+    if (!currentUser) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    const { userId: targetUserId } = await params;
+
+    // Access Control Check
+    const hasAccess = await checkReportAccess(currentUser, targetUserId, db);
+    if (!hasAccess) {
+      return NextResponse.json(
+        { error: "You don't have permission to view this report" },
+        { status: 403 },
+      );
+    }
+
+    // Parse date range from query params
+    const { searchParams } = new URL(request.url);
+    const endDate =
+      searchParams.get("endDate") || new Date().toISOString().split("T")[0];
+    const startDate =
+      searchParams.get("startDate") ||
+      new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
+        .toISOString()
+        .split("T")[0];
+    const format = searchParams.get("format") || "json";
+
+    // Validate dates
+    if (isNaN(Date.parse(startDate)) || isNaN(Date.parse(endDate))) {
+      return NextResponse.json(
+        { error: "Invalid date format. Use YYYY-MM-DD" },
+        { status: 400 },
+      );
+    }
+
+    // Fetch all user data
+    const [user, client, fitnessProfile] = await Promise.all([
+      db.getUserById(targetUserId),
+      db.getClientByUserId(targetUserId),
+      db.getFitnessProfileByUserId(targetUserId),
+    ]);
+
+    if (!user) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    // Aggregate data in parallel
+    const [
+      nutritionRecords,
+      hydrationRecords,
+      fitnessGoals,
+      profileHistory,
+      recommendations,
+    ] = await Promise.all([
+      db.getDailyNutritionRange(targetUserId, startDate, endDate),
+      db.getDailyHydrationRange(targetUserId, startDate, endDate),
+      db.getFitnessGoalsByUserId(targetUserId),
+      db.getFitnessProfileHistory(
+        targetUserId,
+        new Date(startDate),
+        new Date(endDate),
+      ),
+      db.getRecommendationsByUserId(targetUserId),
+    ]);
+
+    // Process and aggregate data
+    const weeklyCheckIns = await processWeeklyCheckIns(
+      db,
+      targetUserId,
+      startDate,
+      endDate,
+    );
+    const nutrition = processNutrition(nutritionRecords);
+    const hydration = processHydration(hydrationRecords);
+    const goals = processGoals(fitnessGoals);
+    const profileChanges = processProfileHistory(profileHistory);
+    const recs = processRecommendations(recommendations);
+
+    const report: UserReport = {
+      userId: targetUserId,
+      user,
+      client,
+      fitnessProfile,
+      reportPeriod: {
+        startDate,
+        endDate,
+      },
+      weeklyCheckIns,
+      nutrition,
+      hydration,
+      goals,
+      profileHistory: profileChanges,
+      recommendations: recs,
+      generatedAt: new Date(),
+    };
+
+    // Return PDF if requested
+    if (format === "pdf") {
+      try {
+        const pdfBase64 = generateReportPDFBase64(report);
+        const pdfBuffer = Buffer.from(pdfBase64, "base64");
+
+        return new NextResponse(pdfBuffer, {
+          status: 200,
+          headers: {
+            "Content-Type": "application/pdf",
+            "Content-Disposition": `attachment; filename="FitAI_Report_${report.user.firstName}_${report.user.lastName}_${startDate}_${endDate}.pdf"`,
+            "Content-Length": pdfBuffer.length.toString(),
+          },
+        });
+      } catch (pdfError) {
+        log.error("Failed to generate PDF", pdfError);
+        return NextResponse.json(
+          { error: "Failed to generate PDF" },
+          { status: 500 },
+        );
+      }
+    }
+
+    return NextResponse.json(report);
+  } catch (error) {
+    log.error("Failed to generate user report", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+/**
+ * Check if the current user has access to view the target user's report
+ */
+async function checkReportAccess(
+  currentUser: { id: string; role: string; gymId?: string },
+  targetUserId: string,
+  db: Awaited<ReturnType<typeof getDatabase>>,
+): Promise<boolean> {
+  // Users can always view their own reports
+  if (currentUser.id === targetUserId) {
+    return true;
+  }
+
+  // Admins can view any user's report in their gym
+  if (currentUser.role === "admin" || currentUser.role === "superAdmin") {
+    const targetUser = await db.getUserById(targetUserId);
+    if (!targetUser) return false;
+
+    // SuperAdmins can view all users
+    if (currentUser.role === "superAdmin") return true;
+
+    // Admins can only view users in their gym
+    if (currentUser.gymId && targetUser.gymId === currentUser.gymId) {
+      return true;
+    }
+    return false;
+  }
+
+  // Trainers can only view reports for their assigned clients
+  if (currentUser.role === "trainer") {
+    const assignments = await db.getTrainerClientAssignments(currentUser.id);
+    const assignment = assignments.find(
+      (a) => a.clientId === targetUserId && a.isActive,
+    );
+    return !!assignment;
+  }
+
+  // Regular users cannot view other users' reports
+  return false;
+}
+
+/**
+ * Process attendance records into weekly check-in stats
+ */
+async function processWeeklyCheckIns(
+  db: Awaited<ReturnType<typeof getDatabase>>,
+  userId: string,
+  startDate: string,
+  endDate: string,
+): Promise<WeeklyCheckInStats[]> {
+  const weeks: WeeklyCheckInStats[] = [];
+
+  // Generate all weeks in the range
+  const current = new Date(startDate);
+  const end = new Date(endDate);
+
+  while (current <= end) {
+    // Get Monday of current week (ISO week)
+    const monday = new Date(current);
+    const day = monday.getDay();
+    const diff = monday.getDate() - day + (day === 0 ? -6 : 1);
+    monday.setDate(diff);
+
+    const weekStart = monday.toISOString().split("T")[0];
+    const sunday = new Date(monday);
+    sunday.setDate(sunday.getDate() + 6);
+    const weekEnd = sunday.toISOString().split("T")[0];
+
+    weeks.push({
+      weekStart,
+      weekEnd,
+      totalCheckIns: 0,
+      totalTimeMinutes: 0,
+      averageDurationMinutes: 0,
+      checkInsByType: ATTENDANCE_TYPES.map((type) => ({ type, count: 0 })),
+    });
+
+    current.setDate(current.getDate() + 7);
+  }
+
+  // Fetch attendance for each week and aggregate
+  for (let i = 0; i < weeks.length; i++) {
+    const week = weeks[i];
+    const attendanceRecords = await db.getAttendanceByWeek(
+      userId,
+      new Date(week.weekStart),
+    );
+
+    // Filter records to only include those within the week
+    const weekStartDate = new Date(week.weekStart);
+    const weekEndDate = new Date(week.weekEnd);
+    weekEndDate.setHours(23, 59, 59, 999);
+
+    const filteredRecords = attendanceRecords.filter((record) => {
+      const checkInTime = new Date(record.checkInTime);
+      return checkInTime >= weekStartDate && checkInTime <= weekEndDate;
+    });
+
+    week.totalCheckIns = filteredRecords.length;
+
+    // Calculate time spent
+    for (const record of filteredRecords) {
+      if (record.checkOutTime) {
+        const checkIn = new Date(record.checkInTime);
+        const checkOut = new Date(record.checkOutTime);
+        const durationMs = checkOut.getTime() - checkIn.getTime();
+        const durationMinutes = Math.floor(durationMs / 60000);
+        week.totalTimeMinutes += durationMinutes;
+      }
+
+      // Count by type
+      const typeIndex = week.checkInsByType.findIndex(
+        (t) => t.type === record.type,
+      );
+      if (typeIndex !== -1) {
+        week.checkInsByType[typeIndex].count++;
+      }
+    }
+
+    // Calculate average duration
+    week.averageDurationMinutes =
+      week.totalCheckIns > 0
+        ? Math.round(week.totalTimeMinutes / week.totalCheckIns)
+        : 0;
+  }
+
+  return weeks.sort((a, b) => a.weekStart.localeCompare(b.weekStart));
+}
+
+/**
+ * Process nutrition records into summaries
+ */
+function processNutrition(records: any[]): UserReport["nutrition"] {
+  const dailySummaries: NutritionSummary[] = records.map((record) => ({
+    date: record.date,
+    totalCalories: record.totalCalories,
+    calorieGoal: record.calorieGoal,
+    caloriesDelta: record.totalCalories - record.calorieGoal,
+    mealsCount: record.meals?.length || 0,
+  }));
+
+  const totalDays = dailySummaries.length;
+  const totalCalories = dailySummaries.reduce(
+    (sum, day) => sum + day.totalCalories,
+    0,
+  );
+  const averageDailyCalories =
+    totalDays > 0 ? Math.round(totalCalories / totalDays) : 0;
+
+  // Count days where calories were within ±10% of goal
+  const daysMetGoal = dailySummaries.filter((day) => {
+    const lowerBound = day.calorieGoal * 0.9;
+    const upperBound = day.calorieGoal * 1.1;
+    return day.totalCalories >= lowerBound && day.totalCalories <= upperBound;
+  }).length;
+
+  return {
+    dailySummaries,
+    averageDailyCalories,
+    totalDays,
+    daysMetGoal,
+  };
+}
+
+/**
+ * Process hydration records into summaries
+ */
+function processHydration(records: any[]): UserReport["hydration"] {
+  const dailySummaries: HydrationSummary[] = records.map((record) => ({
+    date: record.date,
+    totalWater: record.totalWater,
+    waterGoal: record.waterGoal,
+    hydrationPercentage:
+      record.waterGoal > 0
+        ? Math.round((record.totalWater / record.waterGoal) * 100)
+        : 0,
+  }));
+
+  const totalDays = dailySummaries.length;
+  const totalWater = dailySummaries.reduce(
+    (sum, day) => sum + day.totalWater,
+    0,
+  );
+  const averageDailyWater =
+    totalDays > 0 ? Math.round(totalWater / totalDays) : 0;
+
+  // Count days where water goal was met (>= 100%)
+  const daysMetGoal = dailySummaries.filter(
+    (day) => day.hydrationPercentage >= 100,
+  ).length;
+
+  return {
+    dailySummaries,
+    averageDailyWater,
+    totalDays,
+    daysMetGoal,
+  };
+}
+
+/**
+ * Process fitness goals into summaries
+ */
+function processGoals(goals: any[]): GoalSummary {
+  const active = goals.filter((g) => g.status === "active");
+  const completed = goals.filter((g) => g.status === "completed");
+
+  const averageProgress =
+    active.length > 0
+      ? Math.round(
+          active.reduce((sum, g) => sum + g.progress, 0) / active.length,
+        )
+      : 0;
+
+  return {
+    active,
+    completed,
+    totalActive: active.length,
+    totalCompleted: completed.length,
+    averageProgress,
+  };
+}
+
+/**
+ * Process fitness profile history into summaries
+ */
+function processProfileHistory(history: any[]): ProfileChangeSummary[] {
+  return history.map((record) => ({
+    changeType: record.changeType,
+    fieldName: record.fieldName,
+    previousValue: record.previousValue,
+    newValue: record.newValue,
+    changedAt: record.changedAt,
+  }));
+}
+
+/**
+ * Process recommendations into summaries
+ */
+function processRecommendations(recommendations: any[]): RecommendationSummary {
+  const accepted = recommendations.filter((r) => r.status === "accepted");
+  const rejected = recommendations.filter((r) => r.status === "rejected");
+  const pending = recommendations.filter((r) => r.status === "pending");
+
+  return {
+    accepted,
+    rejected,
+    pending,
+    totalAccepted: accepted.length,
+    totalRejected: rejected.length,
+    totalPending: pending.length,
+  };
+}
@@ -0,0 +1,100 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import log from "@/lib/logger";
+
+/**
+ * DELETE /api/trainer-client/[id]
+ * Delete (deactivate) a trainer-client assignment
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const { userId: authUserId } = await auth();
+    if (!authUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(authUserId, db);
+
+    if (!currentUser) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    // Only admins can delete assignments
+    if (currentUser.role !== "admin" && currentUser.role !== "superAdmin") {
+      return NextResponse.json(
+        { error: "Only admins can remove trainer-client assignments" },
+        { status: 403 },
+      );
+    }
+
+    const { id } = await params;
+
+    // Get all assignments for the trainer to find the one with this ID
+    // Note: We need to find the assignment ID, not the trainer or client ID
+    // For now, we'll deactivate by finding the assignment through the trainer
+    // This is a simplified approach - in production you'd want a direct getById method
+
+    const trainerAssignments = await db.getTrainerClientAssignments(
+      currentUser.id,
+    );
+    const assignment = trainerAssignments.find((a) => a.id === id);
+
+    if (!assignment) {
+      // Check if any trainer has this assignment
+      const allAssignments = await db.getTrainerClientAssignments("");
+      const foundAssignment = allAssignments.find((a) => a.id === id);
+
+      if (!foundAssignment) {
+        return NextResponse.json(
+          { error: "Assignment not found" },
+          { status: 404 },
+        );
+      }
+
+      // Deactivate the assignment
+      await db.deactivateTrainerClientAssignment(id);
+
+      log.info("Trainer-client assignment deactivated", {
+        assignmentId: id,
+        deactivatedBy: currentUser.id,
+      });
+
+      return NextResponse.json({
+        success: true,
+        message: "Assignment deactivated successfully",
+      });
+    }
+
+    // Deactivate the assignment
+    const result = await db.deactivateTrainerClientAssignment(id);
+
+    if (!result) {
+      return NextResponse.json(
+        { error: "Failed to deactivate assignment" },
+        { status: 500 },
+      );
+    }
+
+    log.info("Trainer-client assignment deactivated", {
+      assignmentId: id,
+      deactivatedBy: currentUser.id,
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Assignment deactivated successfully",
+    });
+  } catch (error) {
+    log.error("Failed to delete trainer-client assignment", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -0,0 +1,160 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+import log from "@/lib/logger";
+
+/**
+ * GET /api/trainer-client
+ * Get trainer-client assignments
+ *
+ * Query params:
+ * - trainerId: string (optional) - Filter by trainer
+ * - clientId: string (optional) - Filter by client
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { userId: authUserId } = await auth();
+    if (!authUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(authUserId, db);
+
+    if (!currentUser) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    // Only admins and superadmins can view all assignments
+    if (currentUser.role !== "admin" && currentUser.role !== "superAdmin") {
+      return NextResponse.json(
+        { error: "Only admins can view trainer-client assignments" },
+        { status: 403 },
+      );
+    }
+
+    const { searchParams } = new URL(request.url);
+    const trainerId = searchParams.get("trainerId");
+    const clientId = searchParams.get("clientId");
+
+    let assignments;
+
+    if (trainerId) {
+      assignments = await db.getTrainerClientAssignments(trainerId);
+      // Filter by clientId if provided
+      if (clientId) {
+        assignments = assignments.filter((a) => a.clientId === clientId);
+      }
+    } else {
+      // Get all assignments (for admins, filtered by gym)
+      assignments = await db.getTrainerClientAssignments("");
+      // TODO: Filter by gym once gymId is properly set
+    }
+
+    return NextResponse.json({ assignments });
+  } catch (error) {
+    log.error("Failed to get trainer-client assignments", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+/**
+ * POST /api/trainer-client
+ * Create a new trainer-client assignment
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const { userId: authUserId } = await auth();
+    if (!authUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(authUserId, db);
+
+    if (!currentUser) {
+      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+    }
+
+    // Only admins can create assignments
+    if (currentUser.role !== "admin" && currentUser.role !== "superAdmin") {
+      return NextResponse.json(
+        { error: "Only admins can assign trainers to clients" },
+        { status: 403 },
+      );
+    }
+
+    const body = await request.json();
+    const { trainerId, clientId } = body;
+
+    if (!trainerId || !clientId) {
+      return NextResponse.json(
+        { error: "trainerId and clientId are required" },
+        { status: 400 },
+      );
+    }
+
+    // Verify trainer exists and has trainer role
+    const trainer = await db.getUserById(trainerId);
+    if (!trainer) {
+      return NextResponse.json({ error: "Trainer not found" }, { status: 404 });
+    }
+    if (trainer.role !== "trainer" && trainer.role !== "admin") {
+      return NextResponse.json(
+        { error: "User must be a trainer or admin" },
+        { status: 400 },
+      );
+    }
+
+    // Verify client exists
+    const client = await db.getUserById(clientId);
+    if (!client) {
+      return NextResponse.json({ error: "Client not found" }, { status: 404 });
+    }
+    if (client.role !== "client") {
+      return NextResponse.json(
+        { error: "User must be a client" },
+        { status: 400 },
+      );
+    }
+
+    // Check if assignment already exists
+    const existingAssignments = await db.getTrainerClientAssignments(trainerId);
+    const existingAssignment = existingAssignments.find(
+      (a) => a.clientId === clientId && a.isActive,
+    );
+    if (existingAssignment) {
+      return NextResponse.json(
+        { error: "Trainer is already assigned to this client" },
+        { status: 409 },
+      );
+    }
+
+    // Create the assignment
+    const assignment = await db.createTrainerClientAssignment({
+      trainerId,
+      clientId,
+      assignedAt: new Date(),
+      assignedBy: currentUser.id,
+      isActive: true,
+    });
+
+    log.info("Trainer-client assignment created", {
+      trainerId,
+      clientId,
+      assignedBy: currentUser.id,
+    });
+
+    return NextResponse.json({ assignment }, { status: 201 });
+  } catch (error) {
+    log.error("Failed to create trainer-client assignment", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -8,6 +8,8 @@ import {
  errorResponse,
  unauthorizedResponse,
 } from "@/lib/api/responses";
+import { getAuthContext } from "@/lib/auth/context";
+import { getInvitableRoles } from "@/lib/auth/permissions";
 import log from "@/lib/logger";

 /**
@@ -26,6 +28,10 @@ export async function POST(request: NextRequest) {
      return unauthorizedResponse("Unauthorized");
    }

+    // Get full auth context (role and gymId)
+    const authContext = await getAuthContext();
+    const { role: requesterRole, gymId: requesterGymId } = authContext;
+
    const body = await request.json();
    const validationResult = createUserSchema.safeParse(body);

@@ -41,6 +47,33 @@ export async function POST(request: NextRequest) {

    const data = validationResult.data;

+    // Validate role creation permission
+    const allowedRoles = getInvitableRoles(requesterRole);
+    if (!allowedRoles.includes(data.role)) {
+      const roleMessages: Record<string, string> = {
+        trainer:
+          "Trainers can only create clients. Contact an admin to create other roles.",
+        admin:
+          "Admins can create trainers and clients only. Contact a superAdmin to create other admins.",
+        client: "Clients cannot create users.",
+      };
+      return errorResponse(
+        roleMessages[requesterRole] ||
+          "You are not authorized to create this role",
+        { status: 403 },
+      );
+    }
+
+    // Auto-assign gym for non-superAdmins
+    // SuperAdmins can choose any gym, others must use their own gym
+    const assignedGymId =
+      requesterRole === "superAdmin" ? data.gymId : requesterGymId;
+
+    // Validate that non-superAdmins have a gym assigned
+    if (!assignedGymId && requesterRole !== "superAdmin") {
+      return errorResponse("You are not assigned to a gym", { status: 400 });
+    }
+
    // Note: Email is required in current schema
    // TODO: Add schema migration to make email optional for direct creation
    if (!data.email) {
@@ -51,18 +84,37 @@ export async function POST(request: NextRequest) {
    if (data.sendInvitation && data.email) {
      try {
        const client = await clerkClient();
+
+        // Build publicMetadata with consistent field names
+        const publicMetadata: Record<string, any> = {
+          role: data.role,
+          createdBy: userId,
+          gymId: assignedGymId ?? null,
+        };
+
+        // Determine redirect URL based on role
+        // Staff (admin, trainer, superAdmin) → Admin web app
+        // Clients → Mobile app (handled by Clerk's default)
+        const isStaffRole = ["admin", "trainer", "superAdmin"].includes(
+          data.role,
+        );
+        const redirectUrl = isStaffRole
+          ? `${process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"}/sign-up`
+          : undefined; // Clients use default Clerk redirect
+
        const invitation = await client.invitations.createInvitation({
          emailAddress: data.email,
-          publicMetadata: {
-            role: data.role,
-            gymId: data.gymId,
-          },
+          publicMetadata,
+          redirectUrl,
+          ignoreExisting: true, // Don't fail if invitation already exists
        });

        log.info("Clerk invitation sent", {
          email: data.email,
          role: data.role,
+          gymId: assignedGymId,
          invitationId: invitation.id,
+          redirectUrl: redirectUrl || "default (mobile app)",
        });

        // Send custom invitation email (in addition to Clerk's)
@@ -83,7 +135,22 @@ export async function POST(request: NextRequest) {
      } catch (error: unknown) {
        const errorMessage =
          error instanceof Error ? error.message : "Unknown error";
-        log.error("Failed to send Clerk invitation", error);
+
+        // Extract Clerk-specific error details
+        const clerkError = error as any;
+
+        log.error("Failed to send Clerk invitation", error, {
+          email: data.email,
+          role: data.role,
+          gymId: assignedGymId,
+          publicMetadata: assignedGymId
+            ? { role: data.role, gymId: assignedGymId }
+            : { role: data.role },
+          clerkStatus: clerkError?.status,
+          clerkErrors: clerkError?.errors,
+          clerkTraceId: clerkError?.clerkTraceId,
+        });
+
        return errorResponse(`Failed to send invitation: ${errorMessage}`, {
          status: 500,
        });
@@ -106,13 +173,14 @@ export async function POST(request: NextRequest) {
        lastName: data.lastName,
        role: data.role,
        phone: data.phone,
-        gymId: data.gymId,
+        gymId: assignedGymId,
      })
      .returning();

    log.info("User created in database", {
      userId: newUser.id,
      role: data.role,
+      gymId: assignedGymId,
      hasEmail: !!data.email,
    });

@@ -0,0 +1,32 @@
+import { NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { getDatabase } from "@/lib/database";
+import { ensureUserSynced } from "@/lib/sync-user";
+
+/**
+ * GET /api/users/me
+ * Get current authenticated user's information
+ */
+export async function GET() {
+  try {
+    const { userId: clerkUserId } = await auth();
+    if (!clerkUserId) {
+      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+    }
+
+    const db = await getDatabase();
+    const user = await ensureUserSynced(clerkUserId, db);
+
+    if (!user) {
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
+    }
+
+    return NextResponse.json({ user });
+  } catch (error) {
+    console.error("Failed to get current user:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
@@ -24,14 +24,42 @@ import {
  internalErrorResponse,
  badRequestResponse,
 } from "@/lib/api/responses";
+import { getUsersByGym } from "@/lib/gym-context";
+import { ensureUserSynced } from "@/lib/sync-user";

 export async function GET(request: NextRequest) {
  try {
+    // First authenticate the user
+    const { userId: clerkUserId } = await auth();
+    if (!clerkUserId) {
+      return unauthorizedResponse();
+    }
+
    const db = await getDatabase();
+    const currentUser = await ensureUserSynced(clerkUserId, db);
+
+    if (!currentUser) {
+      return forbiddenResponse("User not found");
+    }
+
    const { searchParams } = new URL(request.url);
    const role = searchParams.get("role");

-    let users = await db.getAllUsers();
+    // Get target gym based on role
+    const targetGymId =
+      currentUser.role === "superAdmin"
+        ? (searchParams.get("gymId") ?? undefined)
+        : (currentUser.gymId ?? undefined);
+
+    // Validate gym access for non-superAdmins
+    if (currentUser.role !== "superAdmin" && !targetGymId) {
+      return forbiddenResponse("No gym assigned");
+    }
+
+    // Get users filtered by gym
+    let users = targetGymId
+      ? await getUsersByGym(targetGymId)
+      : await db.getAllUsers();

    // Hydrate gymId from raw DB to ensure consistency with writes
    const rawUserRows = await rawDb.all(sql`SELECT id, gym_id FROM users`);
@@ -303,8 +331,17 @@ export async function PUT(request: NextRequest) {
      return validationErrorResponse(validation.errors);
    }

-    const { id, email, firstName, lastName, role, phone, gymId } =
-      validation.data;
+    const {
+      id,
+      email,
+      firstName,
+      lastName,
+      role,
+      phone,
+      gymId,
+      membershipType,
+      membershipStatus,
+    } = validation.data;

    log.debug("Updating user", {
      id,
@@ -314,6 +351,8 @@ export async function PUT(request: NextRequest) {
      role,
      phone,
      gymId,
+      membershipType,
+      membershipStatus,
    });

    const db = await getDatabase();
@@ -335,6 +374,27 @@ export async function PUT(request: NextRequest) {
      return notFoundResponse("User not found");
    }

+    log.debug("Edit authorization check", {
+      requesterId,
+      requesterRole: requester.role,
+      requesterGymId: requester.gymId,
+      targetUserId: id,
+      targetRole: existingUser.role,
+      targetGymId: existingUser.gymId,
+      requestedRole: role,
+    });
+
+    // Authorization: check gym-based permissions
+    // Non-superAdmins can only edit users in their own gym
+    if (requester.role !== "superAdmin") {
+      if (!requester.gymId) {
+        return forbiddenResponse("No gym assigned to requester");
+      }
+      if (existingUser.gymId !== requester.gymId) {
+        return forbiddenResponse("Cannot edit users from other gyms");
+      }
+    }
+
    // Authorization: determine allowed role changes
    const requesterRole = requester.role;
    const allowedByRole: Record<string, string[]> = {
@@ -345,10 +405,27 @@ export async function PUT(request: NextRequest) {
      generalUser: [], // general users cannot change roles
    };

-    if (role && !allowedByRole[requesterRole]?.includes(role)) {
+    // Only check authorization if the role is actually being changed
+    if (
+      role &&
+      role !== existingUser.role &&
+      !allowedByRole[requesterRole]?.includes(role)
+    ) {
      return forbiddenResponse(`Not authorized to assign role '${role}'`);
    }

+    // Authorization: trainers and admins cannot reassign users to different gyms
+    // Only superAdmins can reassign gyms
+    if (
+      requesterRole !== "superAdmin" &&
+      gymId !== undefined &&
+      gymId !== existingUser.gymId
+    ) {
+      return forbiddenResponse(
+        "Only superAdmins can reassign users to different gyms",
+      );
+    }
+
    // Check if email is being changed and if it's already taken
    if (email && email !== existingUser.email) {
      const userWithEmail = await db.getUserByEmail(email);
@@ -359,24 +436,27 @@ export async function PUT(request: NextRequest) {

    // Update Clerk publicMetadata (role/gymId) to propagate via webhook
    // Note: Only update metadata when a change is requested
-    try {
-      const client = await clerkClient();
-      const publicMetadata: Record<string, unknown> = {};
-      log.debug("Preparing Clerk metadata update", {
-        targetUserId: id,
-        role,
-        gymId,
-      });
+    const client = await clerkClient();
+    const publicMetadata: Record<string, unknown> = {};
+    log.debug("Preparing Clerk metadata update", {
+      targetUserId: id,
+      role,
+      gymId,
+    });

-      if (role) {
-        publicMetadata.role = role;
-      }
-      if (gymId !== undefined) {
-        publicMetadata.gymId = gymId === null ? null : String(gymId);
-      }
+    if (role) {
+      publicMetadata.role = role;
+    }
+    if (gymId !== undefined) {
+      publicMetadata.gymId = gymId === null ? null : String(gymId);
+    }
+
+    if (Object.keys(publicMetadata).length > 0) {
+      log.debug("Updating Clerk user metadata", { publicMetadata });
+      try {
+        // Check if user exists in Clerk first
+        await client.users.getUser(id);

-      if (Object.keys(publicMetadata).length > 0) {
-        log.debug("Updating Clerk user metadata", { publicMetadata });
        const clerkResult = await client.users.updateUser(id, {
          publicMetadata,
        });
@@ -385,14 +465,20 @@ export async function PUT(request: NextRequest) {
          role: clerkResult.publicMetadata?.role,
          gymId: clerkResult.publicMetadata?.gymId,
        });
-      } else {
-        log.debug("No Clerk metadata changes requested");
+      } catch (clerkErr: any) {
+        // User might not exist in Clerk yet - that's OK for local users
+        if (
+          clerkErr?.status === 404 ||
+          clerkErr?.errors?.[0]?.code === "resource_not_found"
+        ) {
+          log.debug(
+            "User not found in Clerk, skipping metadata update (local-only user)",
+          );
+        } else {
+          log.error("Clerk metadata update failed", clerkErr, { userId: id });
+          // Don't fail the whole request - local DB update can still proceed
+        }
      }
-    } catch (clerkErr: any) {
-      log.error("Clerk metadata update failed", clerkErr, { userId: id });
-      return internalErrorResponse(
-        "Failed to update role/gym in identity provider",
-      );
    }

    // Update local DB for immediate UI feedback (webhook will also sync)
@@ -414,6 +500,43 @@ export async function PUT(request: NextRequest) {
    );
    log.debug("User updated in database", { updatedRow });

+    // If the user is a client, update membership fields in clients table
+    const finalRole = role ?? existingUser.role;
+    if (
+      finalRole === "client" &&
+      (membershipType !== undefined || membershipStatus !== undefined)
+    ) {
+      log.debug("Updating client membership fields", {
+        userId: id,
+        membershipType,
+        membershipStatus,
+      });
+
+      // Check if client record exists
+      const existingClient = await rawDb.get(
+        sql`SELECT * FROM clients WHERE user_id = ${id}`,
+      );
+
+      if (existingClient) {
+        // Update existing client record
+        await rawDb.run(
+          sql`UPDATE clients
+              SET membership_type = ${membershipType ?? (existingClient as any).membership_type},
+                  membership_status = ${membershipStatus ?? (existingClient as any).membership_status},
+                  updated_at = ${Date.now()}
+              WHERE user_id = ${id}`,
+        );
+        log.debug("Client membership updated");
+      } else {
+        // Create client record if it doesn't exist
+        await rawDb.run(
+          sql`INSERT INTO clients (id, user_id, membership_type, membership_status, join_date, created_at, updated_at)
+              VALUES (${`client_${id}_${Date.now()}`}, ${id}, ${membershipType ?? "basic"}, ${membershipStatus ?? "active"}, ${Date.now()}, ${Date.now()}, ${Date.now()})`,
+        );
+        log.debug("Client record created");
+      }
+    }
+
    const updatedUser = {
      ...existingUser,
      email: email ?? existingUser.email,
@@ -1,96 +1,102 @@
-'use client'
+"use client";

-import { useState, useEffect } from 'react'
-import { format } from 'date-fns'
-
-interface Attendance {
-    id: string
-    clientId: string
-    checkInTime: string
-    checkOutTime?: string
-    type: string
-    notes?: string
-}
+import { useAttendance } from "@/hooks/use-api";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { Badge } from "@/components/ui/badge";

 export default function AttendancePage() {
-    const [attendance, setAttendance] = useState<Attendance[]>([])
-    const [loading, setLoading] = useState(true)
-
-    useEffect(() => {
-        const fetchAttendance = async () => {
-            try {
-                const res = await fetch('/api/admin/attendance')
-                if (res.ok) {
-                    const data = await res.json()
-                    setAttendance(data)
-                }
-            } catch (error) {
-                console.error('Error fetching attendance:', error)
-            } finally {
-                setLoading(false)
-            }
-        }
-
-        fetchAttendance()
-    }, [])
-
-    if (loading) {
-        return <div className="p-8">Loading...</div>
-    }
+  const { data: attendance = [], isLoading } = useAttendance();

+  if (isLoading) {
    return (
-        <div className="p-8">
-            <h1 className="text-2xl font-bold mb-6">Attendance Monitoring</h1>
-
-            <div className="bg-white rounded-lg shadow overflow-hidden">
-                <table className="min-w-full divide-y divide-gray-200">
-                    <thead className="bg-gray-50">
-                        <tr>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                Client ID
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                Type
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                Check In
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                Check Out
-                            </th>
-                            <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                                Status
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white divide-y divide-gray-200">
-                        {attendance.map((record) => (
-                            <tr key={record.id}>
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-                                    {record.clientId}
-                                </td>
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">
-                                    {record.type}
-                                </td>
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                    {format(new Date(record.checkInTime), 'PP p')}
-                                </td>
-                                <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                    {record.checkOutTime ? format(new Date(record.checkOutTime), 'PP p') : '-'}
-                                </td>
-                                <td className="px-6 py-4 whitespace-nowrap">
-                                    <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${record.checkOutTime
-                                            ? 'bg-gray-100 text-gray-800'
-                                            : 'bg-green-100 text-green-800'
-                                        }`}>
-                                        {record.checkOutTime ? 'Completed' : 'Active'}
-                                    </span>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
+      <div className="space-y-8">
+        <PageHeader
+          title="Attendance"
+          description="Monitor gym check-ins and check-outs"
+          breadcrumbs={[{ label: "Attendance" }]}
+        />
+        <div className="card-modern">
+          <div className="animate-pulse space-y-4">
+            {[...Array(5)].map((_, i) => (
+              <div key={i} className="h-12 bg-muted rounded" />
+            ))}
+          </div>
        </div>
-    )
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <PageHeader
+        title="Attendance"
+        description="Monitor gym check-ins and check-outs"
+        breadcrumbs={[{ label: "Attendance" }]}
+      />
+
+      <div className="card-modern">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border">
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
+                  Client
+                </th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
+                  Type
+                </th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
+                  Check In
+                </th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
+                  Check Out
+                </th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-muted-foreground">
+                  Status
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {attendance.map((record) => (
+                <tr
+                  key={record.id}
+                  className="border-b border-border/50 hover:bg-muted/50 transition-colors"
+                >
+                  <td className="py-3 px-4 text-sm">
+                    {record.userName || record.userId.substring(0, 8) + "..."}
+                  </td>
+                  <td className="py-3 px-4 text-sm capitalize text-muted-foreground">
+                    {record.type}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-muted-foreground">
+                    {new Date(record.checkInTime).toLocaleString()}
+                  </td>
+                  <td className="py-3 px-4 text-sm text-muted-foreground">
+                    {record.checkOutTime
+                      ? new Date(record.checkOutTime).toLocaleString()
+                      : "-"}
+                  </td>
+                  <td className="py-3 px-4">
+                    <Badge variant={record.checkOutTime ? "gray" : "success"}>
+                      {record.checkOutTime ? "Completed" : "Active"}
+                    </Badge>
+                  </td>
+                </tr>
+              ))}
+              {attendance.length === 0 && (
+                <tr>
+                  <td
+                    colSpan={5}
+                    className="py-8 text-center text-muted-foreground"
+                  >
+                    No attendance records found
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
 }
@@ -1,76 +1,248 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
- 
+
@layer base {
  :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 98%;
    --foreground: 222.2 84% 4.9%;
- 
+
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
- 
+
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
- 
-    --primary: 222.2 47.4% 11.2%;
+
+    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
- 
+
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
- 
+
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
- 
+
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
- 
+
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 355.7 100% 97.3%;
+
+    --warning: 37.7 93.1% 50.2%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+
+    --info: 199.4 86.4% 48.4%;
+    --info-foreground: 210 40% 98%;
+
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
+    --ring: 221.2 83.2% 53.3%;
+
+    --radius: 0.625rem;
+
+    --sidebar-background: 222.2 47.4% 7.8%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary: 221.2 83.2% 53.3%;
+    --sidebar-primary-foreground: 210 40% 98%;
+    --sidebar-accent: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 17.5%;
+    --sidebar-ring: 217.2 91.6% 59.8%;
  }
- 
+
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
+
+    --card: 222.2 47.4% 10.2%;
    --card-foreground: 210 40% 98%;
- 
-    --popover: 222.2 84% 4.9%;
+
+    --popover: 222.2 47.4% 10.2%;
    --popover-foreground: 210 40% 98%;
- 
-    --primary: 210 40% 98%;
+
+    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
- 
+
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
- 
+
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
- 
+
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
- 
+
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
- 
+
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 355.7 100% 97.3%;
+
+    --warning: 37.7 93.1% 50.2%;
+    --warning-foreground: 222.2 47.4% 11.2%;
+
+    --info: 199.4 86.4% 48.4%;
+    --info-foreground: 210 40% 98%;
+
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --ring: 224.3 76.3% 48%;
+
+    --sidebar-background: 222.2 47.4% 7.8%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary: 217.2 91.2% 59.8%;
+    --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+    --sidebar-accent: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 17.5%;
+    --sidebar-ring: 217.2 91.6% 59.8%;
  }
 }
- 
+
@layer base {
  * {
    @apply border-border;
  }
  body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
  }
-}
+}
+
+@layer utilities {
+  .gradient-mesh {
+    background:
+      radial-gradient(
+        at 40% 20%,
+        hsla(221, 83%, 53%, 0.1) 0px,
+        transparent 50%
+      ),
+      radial-gradient(at 80% 0%, hsla(189, 97%, 66%, 0.1) 0px, transparent 50%),
+      radial-gradient(at 0% 50%, hsla(355, 85%, 93%, 0.3) 0px, transparent 50%),
+      radial-gradient(
+        at 80% 50%,
+        hsla(240, 75%, 98%, 0.3) 0px,
+        transparent 50%
+      ),
+      radial-gradient(at 0% 100%, hsla(22, 100%, 92%, 0.2) 0px, transparent 50%);
+  }
+
+  .glass {
+    @apply backdrop-blur-xl bg-white/70 dark:bg-black/70;
+  }
+
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary/60;
+  }
+
+  .animate-fade-in {
+    animation: fadeIn 0.5s ease-out forwards;
+  }
+
+  .animate-slide-up {
+    animation: slideUp 0.5s ease-out forwards;
+  }
+
+  .animate-scale-in {
+    animation: scaleIn 0.3s ease-out forwards;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  .stagger-1 {
+    animation-delay: 0.1s;
+  }
+  .stagger-2 {
+    animation-delay: 0.2s;
+  }
+  .stagger-3 {
+    animation-delay: 0.3s;
+  }
+  .stagger-4 {
+    animation-delay: 0.4s;
+  }
+  .stagger-5 {
+    animation-delay: 0.5s;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-all duration-200 hover:bg-primary/90 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center rounded-lg bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground shadow-sm transition-all duration-200 hover:bg-secondary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-muted-foreground transition-all duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-danger {
+    @apply inline-flex items-center justify-center rounded-lg bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground shadow-sm transition-all duration-200 hover:bg-destructive/90 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .card-modern {
+    @apply rounded-xl border border-border/50 bg-card p-6 shadow-sm transition-all duration-200 hover:shadow-md;
+  }
+
+  .card-elevated {
+    @apply rounded-xl border border-border/50 bg-card p-6 shadow-lg transition-all duration-200 hover:shadow-xl hover:-translate-y-0.5;
+  }
+
+  .input-modern {
+    @apply flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-200;
+  }
+
+  .badge-success {
+    @apply inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-400;
+  }
+
+  .badge-warning {
+    @apply inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+  }
+
+  .badge-error {
+    @apply inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-400;
+  }
+
+  .badge-info {
+    @apply inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
+  }
+
+  .badge-default {
+    @apply inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800 dark:bg-gray-800 dark:text-gray-300;
+  }
+}
@@ -9,7 +9,8 @@ import {
  UserButton,
 } from "@clerk/nextjs";
 import { Sidebar } from "@/components/ui/Sidebar";
-import { Toaster } from "sonner";
+import { ToasterProvider } from "@/components/providers/ToasterProvider";
+import { QueryProvider } from "@/components/providers/QueryProvider";

 const inter = Inter({ subsets: ["latin"] });

@@ -25,15 +26,19 @@ export default function RootLayout({
 }) {
  return (
    <ClerkProvider>
-      <html lang="en">
-        <body className={inter.className}>
-          <div className="flex min-h-screen bg-slate-50">
-            <Sidebar />
-            <main className="flex-1 ml-20 p-8">{children}</main>
-          </div>
-          <Toaster richColors position="top-right" />
-        </body>
-      </html>
+      <QueryProvider>
+        <html lang="en">
+          <body className={inter.className}>
+            <div className="flex min-h-screen bg-background">
+              <Sidebar />
+              <main className="flex-1 p-6 lg:p-8 min-h-screen">
+                <div className="max-w-7xl mx-auto space-y-8">{children}</div>
+              </main>
+            </div>
+            <ToasterProvider />
+          </body>
+        </html>
+      </QueryProvider>
    </ClerkProvider>
  );
 }
@@ -1,100 +1,150 @@
 "use client";

-import { useEffect, useState } from "react";
-import { Users, CreditCard, CalendarCheck, TrendingUp } from "lucide-react";
-import { StatsCard } from "@/components/ui/StatsCard";
+import {
+  Users,
+  CreditCard,
+  CalendarCheck,
+  TrendingUp,
+  RefreshCw,
+} from "lucide-react";
+import { StatsCard, StatsCardSkeleton } from "@/components/ui/StatsCard";
+import { PageHeader } from "@/components/ui/PageHeader";
 import { UserManagement } from "@/components/users/UserManagement";
 import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
-import axios from "axios";
-
-interface DashboardStats {
-  totalUsers: number;
-  activeClients: number;
-  totalRevenue: number;
-  revenueGrowth: number;
-}
+import { useDashboardStats } from "@/hooks/use-api";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { useUser } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
+import { GymSelector } from "@/components/gym/GymSelector";

 export default function Home() {
-  const [stats, setStats] = useState<DashboardStats>({
-    totalUsers: 0,
-    activeClients: 0,
-    totalRevenue: 0,
-    revenueGrowth: 0,
-  });
-  const [loading, setLoading] = useState(true);
+  const { user } = useUser();
+  const searchParams = useSearchParams();
+  const gymId = searchParams.get("gymId") ?? undefined;

-  useEffect(() => {
-    const fetchStats = async () => {
-      try {
-        const response = await axios.get("/api/admin/stats");
-        setStats(response.data);
-      } catch (error) {
-        console.error("Failed to fetch dashboard stats:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const {
+    data: stats,
+    isLoading,
+    refetch,
+    isFetching,
+  } = useDashboardStats(gymId);
+  const queryClient = useQueryClient();

-    fetchStats();
-  }, []);
+  // Get user role from metadata
+  const userRole = (user?.publicMetadata?.role as string) ?? "client";
+
+  const handleRefresh = () => {
+    queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    queryClient.invalidateQueries({ queryKey: ["analytics"] });
+    refetch();
+  };

  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
-    }).format(value);
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }).format(value || 0);
  };

  return (
    <div className="space-y-8">
-      <div>
-        <h2 className="text-3xl font-bold text-slate-900">Dashboard</h2>
-        <p className="text-slate-500 mt-2">Welcome back, here's what's happening today.</p>
+      <PageHeader
+        title="Dashboard"
+        description="Welcome back! Here's what's happening with your gym today."
+        actions={
+          <div className="flex items-center gap-3">
+            <GymSelector userRole={userRole} />
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={handleRefresh}
+              disabled={isFetching}
+              className="gap-2"
+            >
+              <RefreshCw
+                className={`h-4 w-4 ${isFetching ? "animate-spin" : ""}`}
+              />
+              Refresh
+            </Button>
+          </div>
+        }
+      />
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {isLoading ? (
+          <>
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+            <StatsCardSkeleton />
+          </>
+        ) : (
+          <>
+            <StatsCard
+              title="Total Users"
+              value={stats?.totalUsers ?? 0}
+              change="+12%"
+              trend="up"
+              icon={Users}
+              color="blue"
+            />
+            <StatsCard
+              title="Active Clients"
+              value={stats?.activeClients ?? 0}
+              change="+5%"
+              trend="up"
+              icon={CalendarCheck}
+              color="green"
+            />
+            <StatsCard
+              title="Revenue"
+              value={formatCurrency(stats?.totalRevenue ?? 0)}
+              change={`${(stats?.revenueGrowth ?? 0) > 0 ? "+" : ""}${stats?.revenueGrowth ?? 0}%`}
+              trend={(stats?.revenueGrowth ?? 0) >= 0 ? "up" : "down"}
+              icon={CreditCard}
+              color="purple"
+            />
+            <StatsCard
+              title="Growth"
+              value="24%"
+              change="-2%"
+              trend="down"
+              icon={TrendingUp}
+              color="orange"
+            />
+          </>
+        )}
      </div>

-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <StatsCard
-          title="Total Users"
-          value={loading ? "..." : stats.totalUsers}
-          change="+12%" // Placeholder for now as we don't track historical growth yet
-          trend="up"
-          icon={Users}
-          color="blue"
-        />
-        <StatsCard
-          title="Active Clients"
-          value={loading ? "..." : stats.activeClients}
-          change="+5%"
-          trend="up"
-          icon={CalendarCheck}
-          color="green"
-        />
-        <StatsCard
-          title="Revenue"
-          value={loading ? "..." : formatCurrency(stats.totalRevenue)}
-          change={`${stats.revenueGrowth > 0 ? "+" : ""}${stats.revenueGrowth}%`}
-          trend={stats.revenueGrowth >= 0 ? "up" : "down"}
-          icon={CreditCard}
-          color="purple"
-        />
-        <StatsCard
-          title="Growth"
-          value="24%" // Placeholder
-          change="-2%"
-          trend="down"
-          icon={TrendingUp}
-          color="orange"
-        />
-      </div>
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
+        {/* <div className="xl:col-span-2"> */}
+        {/*   <div className="card-modern"> */}
+        {/*     <div className="mb-6"> */}
+        {/*       <h3 className="text-lg font-semibold">Recent Activity</h3> */}
+        {/*       <p className="text-sm text-muted-foreground"> */}
+        {/*         Manage and view your users */}
+        {/*       </p> */}
+        {/*     </div> */}
+        {/*     <UserManagement /> */}
+        {/*   </div> */}
+        {/* </div> */}

-      <div className="flex flex-col gap-8">
-        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">Recent Activity</h3>
-          <UserManagement />
-        </div>
-        <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-          <h3 className="text-xl font-bold text-slate-900 mb-6">Quick Analytics</h3>
-          <AnalyticsDashboard />
+        {/* Analytics Sidebar */}
+        <div className="xl:col-span-3">
+          <div className="card-modern">
+            <div className="mb-6">
+              <h3 className="text-lg font-semibold">Quick Analytics</h3>
+              <p className="text-sm text-muted-foreground">
+                Overview of your gym metrics
+              </p>
+            </div>
+            <AnalyticsDashboard gymId={gymId} />
+          </div>
        </div>
      </div>
    </div>
@@ -55,7 +55,7 @@ export default function ProfilePage() {
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-bold">Profile</h1>
          <Button
-            variant={isEditing ? "primary" : "secondary"}
+            variant={isEditing ? "default" : "secondary"}
            onClick={() => setIsEditing(!isEditing)}
          >
            {isEditing ? "Cancel" : "Edit Profile"}
@@ -1,86 +1,41 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useUser } from "@clerk/nextjs";
 import log from "@/lib/logger";
 import { toast } from "@/lib/toast";
-
-interface User {
-  id: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-}
-
-interface Recommendation {
-  id: string;
-  userId: string;
-  content: string;
-  recommendationText: string;
-  activityPlan: string;
-  dietPlan: string;
-  status: string;
-  createdAt: Date;
-}
+import {
+  useUsers,
+  useRecommendations,
+  useGenerateRecommendations,
+  useApproveRecommendation,
+  useUpdateRecommendation,
+  type Recommendation,
+} from "@/hooks/use-api";
+import { PageHeader } from "@/components/ui/PageHeader";

 export default function RecommendationsPage() {
  const { user } = useUser();
-  const [users, setUsers] = useState<User[]>([]);
-  const [pendingRecommendations, setPendingRecommendations] = useState<
-    Recommendation[]
-  >([]);
-  const [loading, setLoading] = useState(true);
-  const [generating, setGenerating] = useState<string | null>(null);
  const [useExternalModel, setUseExternalModel] = useState(false);

-  useEffect(() => {
-    fetchData();
-  }, []);
+  const { data: users = [], isLoading: usersLoading } = useUsers();
+  const { data: allRecommendations = [], isLoading: recsLoading } =
+    useRecommendations();
+  const pendingRecommendations = allRecommendations.filter(
+    (r) => r.status === "pending",
+  );

-  const fetchData = async () => {
-    try {
-      // Fetch users - API returns { success: true, data: { users: [...] }, meta: {...} }
-      const usersRes = await fetch("/api/users");
-      const usersResult = await usersRes.json();
-      const usersArray = usersResult.data?.users || usersResult.users || [];
-      setUsers(usersArray);
-
-      // Fetch pending recommendations - API returns { success: true, data: { recommendations: [...] }, meta: {...} }
-      const recsRes = await fetch("/api/recommendations");
-      const recsResult = await recsRes.json();
-      const allRecs =
-        recsResult.data?.recommendations || recsResult.recommendations || [];
-      setPendingRecommendations(
-        allRecs.filter((r: Recommendation) => r.status === "pending"),
-      );
-    } catch (error) {
-      log.error("Failed to fetch data", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const generateRec = useGenerateRecommendations();
+  const approveRec = useApproveRecommendation();
+  const updateRec = useUpdateRecommendation();

  const handleGenerate = async (userId: string) => {
-    setGenerating(userId);
    try {
-      const res = await fetch("/api/recommendations/generate", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ userId, useExternalModel }),
-      });
-
-      if (!res.ok) {
-        const error = await res.json();
-        toast.error(`Error: ${error.error}`);
-      } else {
-        toast.success("Recommendation generated successfully!");
-        fetchData(); // Refresh data
-      }
+      await generateRec.mutateAsync(userId);
+      toast.success("Recommendation generated successfully!");
    } catch (error) {
      log.error("Failed to generate recommendation", error);
      toast.error("Failed to generate recommendation.");
-    } finally {
-      setGenerating(null);
    }
  };

@@ -89,25 +44,11 @@ export default function RecommendationsPage() {
    status: "approved" | "rejected",
  ) => {
    try {
-      const res = await fetch("/api/recommendations/approve", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          recommendationId,
-          status,
-          approvedBy: user?.id || "admin",
-        }),
+      await approveRec.mutateAsync({
+        recommendationId,
+        approved: status === "approved",
      });
-
-      if (!res.ok) {
-        const errorData = await res.json();
-        toast.error(
-          `Failed to update status: ${errorData.error || "Unknown error"}`,
-        );
-      } else {
-        toast.success("Recommendation status updated");
-        fetchData(); // Refresh data
-      }
+      toast.success("Recommendation status updated");
    } catch (error) {
      log.error("Failed to approve recommendation", error);
      toast.error("Error processing request");
@@ -124,168 +65,137 @@ export default function RecommendationsPage() {
      newActivityPlan === null ||
      newDietPlan === null
    ) {
-      // User cancelled one of the prompts
      return;
    }

    try {
-      const res = await fetch("/api/recommendations", {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          id: rec.id,
-          content: newContent,
-          activityPlan: newActivityPlan,
-          dietPlan: newDietPlan,
-        }),
+      await updateRec.mutateAsync({
+        id: rec.id,
+        content: newContent,
+        activityPlan: newActivityPlan,
+        dietPlan: newDietPlan,
      });
-
-      if (!res.ok) {
-        const errorData = await res.json();
-        toast.error(
-          `Failed to update recommendation: ${errorData.error || "Unknown error"}`,
-        );
-      } else {
-        toast.success("Recommendation updated successfully!");
-        fetchData(); // Refresh data
-      }
+      toast.success("Recommendation updated successfully!");
    } catch (error) {
      log.error("Failed to update recommendation", error);
      toast.error("Failed to update recommendation.");
    }
  };

-  if (loading) {
+  if (usersLoading || recsLoading) {
    return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-xl">Loading...</div>
+      <div className="flex items-center justify-center h-64">
+        <div className="text-lg">Loading...</div>
      </div>
    );
  }

  return (
-    <div className="container mx-auto py-10 px-4">
-      <div className="flex justify-between items-center mb-8">
-        <h1 className="text-3xl font-bold">AI Recommendations</h1>
+    <div className="space-y-8">
+      <PageHeader
+        title="AI Recommendations"
+        description="Generate and manage AI-powered fitness recommendations"
+        breadcrumbs={[{ label: "AI Recommendations" }]}
+      />

-        {/* Model Selection Toggle */}
-        <div className="flex items-center gap-3 bg-white px-4 py-2 rounded-lg shadow">
-          <span className="text-sm font-medium text-gray-700">
-            {useExternalModel ? "DeepSeek AI" : "Local Ollama"}
-          </span>
-          <button
-            onClick={() => setUseExternalModel(!useExternalModel)}
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-              useExternalModel ? "bg-blue-600" : "bg-gray-300"
-            }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
-                useExternalModel ? "translate-x-6" : "translate-x-1"
-              }`}
-            />
-          </button>
-          <span className="text-xs text-gray-500">
-            {useExternalModel ? "External" : "Local"}
-          </span>
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Generate Section */}
-        <div>
-          <h2 className="text-2xl font-semibold mb-4">
-            Generate Recommendations
-          </h2>
-          <div className="bg-white shadow rounded-lg p-6">
-            <p className="mb-4 text-gray-600">
+        <div className="card-modern">
+          <div className="mb-6">
+            <h3 className="text-lg font-semibold">Generate Recommendations</h3>
+            <p className="text-sm text-muted-foreground">
              Select a user to generate a new daily recommendation.
            </p>
-            <ul className="space-y-4">
-              {users.map((user) => (
-                <li
-                  key={user.id}
-                  className="flex items-center justify-between border-b pb-2"
-                >
-                  <div>
-                    <p className="font-medium">
-                      {user.firstName} {user.lastName}
-                    </p>
-                    <p className="text-sm text-gray-500">{user.email}</p>
-                  </div>
-                  <button
-                    onClick={() => handleGenerate(user.id)}
-                    disabled={generating === user.id}
-                    className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
-                  >
-                    {generating === user.id ? "Generating..." : "Generate"}
-                  </button>
-                </li>
-              ))}
-              {users.length === 0 && (
-                <p className="text-gray-500 italic">No users found.</p>
-              )}
-            </ul>
          </div>
+          <ul className="space-y-4">
+            {users.map((user) => (
+              <li
+                key={user.id}
+                className="flex items-center justify-between border-b border-border/50 pb-4 last:border-0 last:pb-0"
+              >
+                <div>
+                  <p className="font-medium">
+                    {user.firstName} {user.lastName}
+                  </p>
+                  <p className="text-sm text-muted-foreground">{user.email}</p>
+                </div>
+                <button
+                  onClick={() => handleGenerate(user.id)}
+                  disabled={generateRec.isPending}
+                  className="btn-primary"
+                >
+                  {generateRec.isPending ? "Generating..." : "Generate"}
+                </button>
+              </li>
+            ))}
+            {users.length === 0 && (
+              <p className="text-muted-foreground italic">No users found.</p>
+            )}
+          </ul>
        </div>

        {/* Pending Approvals Section */}
-        <div>
-          <h2 className="text-2xl font-semibold mb-4">Pending Approvals</h2>
-          <div className="bg-white shadow rounded-lg p-6">
-            {pendingRecommendations.length === 0 ? (
-              <p className="text-gray-500 italic">
-                No pending recommendations.
-              </p>
-            ) : (
-              <ul className="space-y-6">
-                {pendingRecommendations.map((rec) => (
-                  <li key={rec.id} className="border rounded p-4">
-                    <div className="flex justify-between items-start mb-2">
-                      <h3 className="font-bold">For: User {rec.userId}</h3>
-                      <span className="text-xs text-gray-500">
-                        {new Date(rec.createdAt).toLocaleDateString()}
-                      </span>
-                    </div>
-                    <div className="space-y-2 text-sm mb-4">
-                      <div>
-                        <span className="font-semibold">Advice:</span>{" "}
-                        {rec.recommendationText}
-                      </div>
-                      <div>
-                        <span className="font-semibold">Activity:</span>{" "}
-                        {rec.activityPlan}
-                      </div>
-                      <div>
-                        <span className="font-semibold">Diet:</span>{" "}
-                        {rec.dietPlan}
-                      </div>
-                    </div>
-                    <div className="flex space-x-2">
-                      <button
-                        onClick={() => handleEdit(rec)}
-                        className="flex-1 bg-blue-500 text-white py-2 rounded hover:bg-blue-600"
-                      >
-                        Edit
-                      </button>
-                      <button
-                        onClick={() => handleApprove(rec.id, "approved")}
-                        className="flex-1 bg-green-600 text-white py-2 rounded hover:bg-green-700"
-                      >
-                        Approve
-                      </button>
-                      <button
-                        onClick={() => handleApprove(rec.id, "rejected")}
-                        className="flex-1 bg-red-600 text-white py-2 rounded hover:bg-red-700"
-                      >
-                        Reject
-                      </button>
-                    </div>
-                  </li>
-                ))}
-              </ul>
-            )}
+        <div className="card-modern">
+          <div className="mb-6">
+            <h3 className="text-lg font-semibold">Pending Approvals</h3>
+            <p className="text-sm text-muted-foreground">
+              Review and approve AI-generated recommendations
+            </p>
          </div>
+          {pendingRecommendations.length === 0 ? (
+            <p className="text-muted-foreground italic">
+              No pending recommendations.
+            </p>
+          ) : (
+            <ul className="space-y-4">
+              {pendingRecommendations.map((rec) => (
+                <li
+                  key={rec.id}
+                  className="border border-border rounded-lg p-4"
+                >
+                  <div className="flex justify-between items-start mb-3">
+                    <h4 className="font-semibold">For: User {rec.userId}</h4>
+                    <span className="text-xs text-muted-foreground">
+                      {new Date(rec.createdAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="space-y-2 text-sm mb-4">
+                    <div>
+                      <span className="font-medium">Advice:</span>{" "}
+                      {rec.recommendationText}
+                    </div>
+                    <div>
+                      <span className="font-medium">Activity:</span>{" "}
+                      {rec.activityPlan}
+                    </div>
+                    <div>
+                      <span className="font-medium">Diet:</span> {rec.dietPlan}
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <button
+                      onClick={() => handleEdit(rec)}
+                      className="btn-secondary flex-1"
+                    >
+                      Edit
+                    </button>
+                    <button
+                      onClick={() => handleApprove(rec.id, "approved")}
+                      className="btn-primary flex-1 bg-emerald-600 hover:bg-emerald-700"
+                    >
+                      Approve
+                    </button>
+                    <button
+                      onClick={() => handleApprove(rec.id, "rejected")}
+                      className="btn-danger flex-1"
+                    >
+                      Reject
+                    </button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
        </div>
      </div>
    </div>
@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { UserReport } from "@/components/reports/UserReport";
+import { ReportFilters } from "@/components/reports/ReportFilters";
+import { Card, CardContent } from "@/components/ui/card";
+
+export default function ReportsPage() {
+  const [selectedUserId, setSelectedUserId] = useState<string>("");
+  const [dateRange, setDateRange] = useState<{
+    startDate: string;
+    endDate: string;
+  }>({
+    startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000)
+      .toISOString()
+      .split("T")[0],
+    endDate: new Date().toISOString().split("T")[0],
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8 space-y-6">
+        <div className="flex justify-between items-center">
+          <h1 className="text-3xl font-bold text-gray-900">User Reports</h1>
+        </div>
+
+        <ReportFilters
+          selectedUserId={selectedUserId}
+          onUserChange={setSelectedUserId}
+          dateRange={dateRange}
+          onDateRangeChange={setDateRange}
+        />
+
+        {selectedUserId ? (
+          <UserReport
+            userId={selectedUserId}
+            startDate={dateRange.startDate}
+            endDate={dateRange.endDate}
+          />
+        ) : (
+          <Card>
+            <CardContent className="flex items-center justify-center h-64">
+              <p className="text-gray-500 text-lg">
+                Select a user to view their report
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -9,6 +9,10 @@ import {
  AlertTriangle,
  Check,
  Loader2,
+  Trash2,
+  Users,
+  CalendarCheck,
+  TrendingUp,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useUser } from "@clerk/nextjs";
@@ -26,6 +30,21 @@ interface Gym {
  location?: string | null;
  status: "active" | "inactive";
  adminUserId: string;
+  createdAt?: number;
+}
+
+interface GymStats {
+  totalUsers: number;
+  admins: number;
+  trainers: number;
+  clients: number;
+  membershipStats: {
+    basic: number;
+    premium: number;
+    vip: number;
+  };
+  activeClients: number;
+  attendanceLast30Days: number;
 }

 export default function SettingsPage() {
@@ -46,6 +65,13 @@ export default function SettingsPage() {
    type: "success" | "error";
    text: string;
  } | null>(null);
+
+  // Selected gym for details
+  const [selectedGym, setSelectedGym] = useState<Gym | null>(null);
+  const [gymStats, setGymStats] = useState<GymStats | null>(null);
+  const [statsLoading, setStatsLoading] = useState(false);
+  const [deletingGym, setDeletingGym] = useState(false);
+
  // Create Gym modal state
  const [showCreateGym, setShowCreateGym] = useState(false);
  const [gymName, setGymName] = useState("");
@@ -77,11 +103,33 @@ export default function SettingsPage() {
    }
  };

+  const fetchGymStats = async (gymId: string) => {
+    setStatsLoading(true);
+    try {
+      const res = await axios.get(`/api/gyms/${gymId}/stats`);
+      if (res.data?.stats) {
+        setGymStats(res.data.stats);
+      }
+    } catch (error) {
+      log.error("Failed to fetch gym stats", error);
+    } finally {
+      setStatsLoading(false);
+    }
+  };
+
  useEffect(() => {
    fetchBackups();
    fetchGyms();
  }, []);

+  useEffect(() => {
+    if (selectedGym) {
+      fetchGymStats(selectedGym.id);
+    } else {
+      setGymStats(null);
+    }
+  }, [selectedGym]);
+
  const handleCreateBackup = async () => {
    setCreatingBackup(true);
    setMessage(null);
@@ -111,7 +159,6 @@ export default function SettingsPage() {
    try {
      await axios.post("/api/admin/backups/restore", { filename });
      setMessage({ type: "success", text: "Database restored successfully" });
-      // Optional: Refresh page or force re-login if session is invalidated
    } catch (error) {
      log.error("Failed to restore backup", error);
      setMessage({ type: "error", text: "Failed to restore backup" });
@@ -135,21 +182,45 @@ export default function SettingsPage() {
    return new Date(dateString).toLocaleString();
  };

-  const handleSelectGym = async (gymId: string | null) => {
+  const handleSelectGym = async (gym: Gym | null) => {
+    setSelectedGym(gym);
+    setGymStats(null);
+  };
+
+  const handleDeleteGym = async (gymId: string) => {
+    if (
+      !window.confirm(
+        "Are you sure you want to delete this gym? This action cannot be undone.",
+      )
+    ) {
+      return;
+    }
+
+    setDeletingGym(true);
    setGymMessage(null);
    try {
-      // Update current user's gym selection
-      await axios.patch("/api/users/gym", { gymId });
-      setGymMessage({
-        type: "success",
-        text: gymId ? "Gym selected successfully" : "Proceeding without gym",
-      });
-    } catch (error) {
-      log.error("Failed to set gym", error);
-      setGymMessage({ type: "error", text: "Failed to set gym" });
+      const response = await axios.delete(`/api/gyms/${gymId}`);
+      log.info("Delete gym response:", response.data);
+      setGymMessage({ type: "success", text: "Gym deleted successfully" });
+      setSelectedGym(null);
+      setGymStats(null);
+      await fetchGyms();
+    } catch (error: any) {
+      log.error("Failed to delete gym", error);
+      const errorMessage =
+        error.response?.data?.error ||
+        error.response?.data ||
+        error.message ||
+        "Failed to delete gym";
+      setGymMessage({ type: "error", text: errorMessage });
+    } finally {
+      setDeletingGym(false);
    }
  };

+  const userRole = (user?.publicMetadata?.role as string) ?? "client";
+  const isSuperAdmin = userRole === "superAdmin";
+
  return (
    <div className="space-y-8 p-8">
      <div>
@@ -159,7 +230,7 @@ export default function SettingsPage() {
        </p>
      </div>

-      {/* Gym Picker */}
+      {/* Gym Management */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
@@ -168,10 +239,12 @@ export default function SettingsPage() {
            </div>
            <div>
              <h3 className="text-xl font-bold text-slate-900">
-                Gym Selection
+                Gym Management
              </h3>
              <p className="text-sm text-slate-500">
-                Select your gym or proceed without a gym
+                {isSuperAdmin
+                  ? "Select a gym to view details, create or delete gyms"
+                  : "Select your gym or proceed without a gym"}
              </p>
              <p className="text-xs text-blue-600 mt-1">
                {user ? (
@@ -180,11 +253,6 @@ export default function SettingsPage() {
                    <span className="font-medium">
                      {String(user.publicMetadata?.role ?? "unknown")}
                    </span>
-                    {" • "}
-                    Gym ID:{" "}
-                    <span className="font-medium">
-                      {String(user.publicMetadata?.gymId ?? "none")}
-                    </span>
                  </>
                ) : (
                  "Loading user metadata..."
@@ -196,6 +264,8 @@ export default function SettingsPage() {
            <Button
              onClick={fetchGyms}
              disabled={gymsLoading}
+              variant="outline"
+              size="sm"
              className="flex items-center gap-2"
            >
              {gymsLoading ? (
@@ -203,14 +273,17 @@ export default function SettingsPage() {
              ) : (
                <RefreshCw className="w-4 h-4" />
              )}
-              Refresh Gyms
-            </Button>
-            <Button
-              onClick={() => setShowCreateGym(true)}
-              className="flex items-center gap-2"
-            >
-              Create Gym
+              Refresh
            </Button>
+            {isSuperAdmin && (
+              <Button
+                onClick={() => setShowCreateGym(true)}
+                size="sm"
+                className="flex items-center gap-2"
+              >
+                Create Gym
+              </Button>
+            )}
          </div>
        </div>

@@ -226,6 +299,7 @@ export default function SettingsPage() {
            {gymMessage.text}
          </div>
        )}
+
        {showCreateGym && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
@@ -310,59 +384,191 @@ export default function SettingsPage() {
          </div>
        )}

-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-          <div className="border rounded-lg p-4 flex flex-col justify-between">
-            <div>
-              <h4 className="font-semibold text-slate-900">
-                Proceed without gym
-              </h4>
-              <p className="text-sm text-slate-600 mt-1">
-                You can select a gym later.
-              </p>
-            </div>
-            <Button
-              variant="outline"
-              className="mt-4"
-              onClick={() => handleSelectGym(null)}
-            >
-              Proceed without gym
-            </Button>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Gym List */}
+          <div className="lg:col-span-1 space-y-4">
+            <h4 className="font-semibold text-slate-900">Gyms</h4>
+            {gymsLoading ? (
+              <div className="flex items-center justify-center p-8 text-slate-500">
+                <Loader2 className="w-5 h-5 animate-spin mr-2" />
+                Loading...
+              </div>
+            ) : gyms.length === 0 ? (
+              <div className="p-4 text-center text-slate-500">
+                No active gyms found.
+              </div>
+            ) : (
+              <div className="space-y-2 max-h-96 overflow-y-auto">
+                {gyms.map((gym) => (
+                  <div
+                    key={gym.id}
+                    className={`border rounded-lg p-3 cursor-pointer transition-colors ${
+                      selectedGym?.id === gym.id
+                        ? "border-blue-500 bg-blue-50"
+                        : "hover:bg-slate-50"
+                    }`}
+                    onClick={() => handleSelectGym(gym)}
+                  >
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h5 className="font-medium text-slate-900">
+                          {gym.name}
+                        </h5>
+                        <p className="text-xs text-slate-500">
+                          {gym.location || "No location"}
+                        </p>
+                      </div>
+                      <span
+                        className={`text-xs px-2 py-1 rounded ${
+                          gym.status === "active"
+                            ? "bg-green-100 text-green-700"
+                            : "bg-red-100 text-red-700"
+                        }`}
+                      >
+                        {gym.status}
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
          </div>

-          {gymsLoading ? (
-            <div className="col-span-full flex items-center justify-center p-8 text-slate-500">
-              <Loader2 className="w-5 h-5 animate-spin mr-2" />
-              Loading gyms...
-            </div>
-          ) : gyms.length === 0 ? (
-            <div className="col-span-full p-8 text-center text-slate-500">
-              No active gyms found.
-            </div>
-          ) : (
-            gyms.map((gym) => (
-              <div
-                key={gym.id}
-                className="border rounded-lg p-4 flex flex-col justify-between"
-              >
-                <div>
-                  <h4 className="font-semibold text-slate-900">{gym.name}</h4>
-                  <p className="text-sm text-slate-600 mt-1">
-                    {gym.location || "No location provided"}
-                  </p>
+          {/* Gym Details / Stats */}
+          <div className="lg:col-span-2">
+            {selectedGym ? (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <h4 className="font-semibold text-slate-900">
+                    {selectedGym.name} - Details
+                  </h4>
+                  {isSuperAdmin && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                      onClick={() => handleDeleteGym(selectedGym.id)}
+                      disabled={deletingGym}
+                    >
+                      {deletingGym ? (
+                        <Loader2 className="w-4 h-4 animate-spin" />
+                      ) : (
+                        <Trash2 className="w-4 h-4 mr-1" />
+                      )}
+                      Delete Gym
+                    </Button>
+                  )}
                </div>
-                <Button
-                  variant="default"
-                  className="mt-4"
-                  onClick={() => handleSelectGym(gym.id)}
-                >
-                  Select this gym
-                </Button>
+
+                {/* Gym Info */}
+                <div className="grid grid-cols-2 gap-4 p-4 bg-slate-50 rounded-lg">
+                  <div>
+                    <p className="text-xs text-slate-500">Location</p>
+                    <p className="font-medium">
+                      {selectedGym.location || "Not specified"}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-slate-500">Status</p>
+                    <p className="font-medium capitalize">
+                      {selectedGym.status}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Stats */}
+                {statsLoading ? (
+                  <div className="flex items-center justify-center p-8">
+                    <Loader2 className="w-6 h-6 animate-spin text-slate-400" />
+                  </div>
+                ) : gymStats ? (
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div className="p-4 bg-blue-50 rounded-lg">
+                      <div className="flex items-center gap-2 mb-1">
+                        <Users className="w-4 h-4 text-blue-600" />
+                        <span className="text-xs text-blue-600">
+                          Total Users
+                        </span>
+                      </div>
+                      <p className="text-2xl font-bold text-blue-700">
+                        {gymStats.totalUsers}
+                      </p>
+                    </div>
+                    <div className="p-4 bg-green-50 rounded-lg">
+                      <div className="flex items-center gap-2 mb-1">
+                        <CalendarCheck className="w-4 h-4 text-green-600" />
+                        <span className="text-xs text-green-600">
+                          Active Clients
+                        </span>
+                      </div>
+                      <p className="text-2xl font-bold text-green-700">
+                        {gymStats.activeClients}
+                      </p>
+                    </div>
+                    <div className="p-4 bg-purple-50 rounded-lg">
+                      <div className="flex items-center gap-2 mb-1">
+                        <TrendingUp className="w-4 h-4 text-purple-600" />
+                        <span className="text-xs text-purple-600">
+                          Check-ins (30d)
+                        </span>
+                      </div>
+                      <p className="text-2xl font-bold text-purple-700">
+                        {gymStats.attendanceLast30Days}
+                      </p>
+                    </div>
+                    <div className="p-4 bg-orange-50 rounded-lg">
+                      <div className="flex items-center gap-2 mb-1">
+                        <Users className="w-4 h-4 text-orange-600" />
+                        <span className="text-xs text-orange-600">
+                          Trainers
+                        </span>
+                      </div>
+                      <p className="text-2xl font-bold text-orange-700">
+                        {gymStats.trainers}
+                      </p>
+                    </div>
+                  </div>
+                ) : null}
+
+                {/* Membership Distribution */}
+                {gymStats && (
+                  <div className="mt-4">
+                    <h5 className="text-sm font-medium text-slate-700 mb-2">
+                      Membership Distribution
+                    </h5>
+                    <div className="flex gap-4">
+                      <div className="flex-1 p-3 bg-slate-100 rounded-lg text-center">
+                        <p className="text-2xl font-bold text-slate-700">
+                          {gymStats.membershipStats.basic}
+                        </p>
+                        <p className="text-xs text-slate-500">Basic</p>
+                      </div>
+                      <div className="flex-1 p-3 bg-blue-50 rounded-lg text-center">
+                        <p className="text-2xl font-bold text-blue-700">
+                          {gymStats.membershipStats.premium}
+                        </p>
+                        <p className="text-xs text-blue-500">Premium</p>
+                      </div>
+                      <div className="flex-1 p-3 bg-yellow-50 rounded-lg text-center">
+                        <p className="text-2xl font-bold text-yellow-700">
+                          {gymStats.membershipStats.vip}
+                        </p>
+                        <p className="text-xs text-yellow-600">VIP</p>
+                      </div>
+                    </div>
+                  </div>
+                )}
              </div>
-            ))
-          )}
+            ) : (
+              <div className="flex items-center justify-center h-64 bg-slate-50 rounded-lg">
+                <p className="text-slate-500">Select a gym to view details</p>
+              </div>
+            )}
+          </div>
        </div>
      </div>

+      {/* Database Management */}
      <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
@@ -0,0 +1,304 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { User, TrainerClientAssignment } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+import { Plus, Trash2, UserCheck, UserX } from "lucide-react";
+
+export default function TrainerClientsPage() {
+  const [trainers, setTrainers] = useState<User[]>([]);
+  const [clients, setClients] = useState<User[]>([]);
+  const [assignments, setAssignments] = useState<
+    (TrainerClientAssignment & { trainer?: User; client?: User })[]
+  >([]);
+  const [loading, setLoading] = useState(true);
+  const [selectedTrainer, setSelectedTrainer] = useState<string>("");
+  const [selectedClient, setSelectedClient] = useState<string>("");
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const fetchData = async () => {
+    try {
+      setLoading(true);
+
+      // Fetch trainers
+      const trainersRes = await fetch("/api/users?role=trainer");
+      if (trainersRes.ok) {
+        const trainersData = await trainersRes.json();
+        setTrainers(trainersData.users || []);
+      }
+
+      // Fetch clients
+      const clientsRes = await fetch("/api/users?role=client");
+      if (clientsRes.ok) {
+        const clientsData = await clientsRes.json();
+        setClients(clientsData.users || []);
+      }
+
+      // Fetch all assignments
+      const assignmentsRes = await fetch("/api/trainer-client");
+      if (assignmentsRes.ok) {
+        const assignmentsData = await assignmentsRes.json();
+        // Enrich assignments with user data
+        const enrichedAssignments = await Promise.all(
+          (assignmentsData.assignments || []).map(
+            async (assignment: TrainerClientAssignment) => {
+              const trainer = trainers.find(
+                (t: User) => t.id === assignment.trainerId,
+              );
+              const client = clients.find(
+                (c: User) => c.id === assignment.clientId,
+              );
+              return { ...assignment, trainer, client };
+            },
+          ),
+        );
+        setAssignments(enrichedAssignments);
+      }
+    } catch (error) {
+      console.error("Failed to fetch data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAssign = async () => {
+    if (!selectedTrainer || !selectedClient) {
+      alert("Please select both a trainer and a client");
+      return;
+    }
+
+    try {
+      const response = await fetch("/api/trainer-client", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          trainerId: selectedTrainer,
+          clientId: selectedClient,
+        }),
+      });
+
+      if (response.ok) {
+        alert("Assignment created successfully!");
+        setSelectedTrainer("");
+        setSelectedClient("");
+        fetchData(); // Refresh
+      } else {
+        const error = await response.json();
+        alert(error.error || "Failed to create assignment");
+      }
+    } catch (error) {
+      console.error("Failed to create assignment:", error);
+      alert("Failed to create assignment");
+    }
+  };
+
+  const handleRemoveAssignment = async (id: string) => {
+    if (!confirm("Are you sure you want to remove this assignment?")) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/trainer-client/${id}`, {
+        method: "DELETE",
+      });
+
+      if (response.ok) {
+        alert("Assignment removed successfully!");
+        fetchData(); // Refresh
+      } else {
+        const error = await response.json();
+        alert(error.error || "Failed to remove assignment");
+      }
+    } catch (error) {
+      console.error("Failed to remove assignment:", error);
+      alert("Failed to remove assignment");
+    }
+  };
+
+  const getActiveAssignments = () => assignments.filter((a) => a.isActive);
+  const getInactiveAssignments = () => assignments.filter((a) => !a.isActive);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 py-8">
+          <div className="flex items-center justify-center h-64">
+            <div className="text-lg">Loading...</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="container mx-auto px-4 py-8 space-y-6">
+        <div className="flex justify-between items-center">
+          <h1 className="text-3xl font-bold text-gray-900">
+            Trainer-Client Assignments
+          </h1>
+        </div>
+
+        {/* Create Assignment Form */}
+        <Card>
+          <CardHeader>
+            <CardTitle>Assign Trainer to Client</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Select Trainer</label>
+                <Select
+                  value={selectedTrainer}
+                  onValueChange={setSelectedTrainer}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Choose a trainer..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {trainers.map((trainer) => (
+                      <SelectItem key={trainer.id} value={trainer.id}>
+                        {trainer.firstName} {trainer.lastName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-medium">Select Client</label>
+                <Select
+                  value={selectedClient}
+                  onValueChange={setSelectedClient}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Choose a client..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {clients.map((client) => (
+                      <SelectItem key={client.id} value={client.id}>
+                        {client.firstName} {client.lastName}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex items-end">
+                <Button onClick={handleAssign} className="w-full">
+                  <Plus className="w-4 h-4 mr-2" />
+                  Assign
+                </Button>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Active Assignments */}
+        <Card>
+          <CardHeader>
+            <div className="flex justify-between items-center">
+              <CardTitle>Active Assignments</CardTitle>
+              <Badge variant="default">{getActiveAssignments().length}</Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {getActiveAssignments().length === 0 ? (
+              <p className="text-gray-500 text-center py-8">
+                No active assignments
+              </p>
+            ) : (
+              <div className="space-y-2">
+                {getActiveAssignments().map((assignment) => (
+                  <div
+                    key={assignment.id}
+                    className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <div className="flex items-center space-x-2">
+                        <UserCheck className="w-4 h-4 text-green-600" />
+                        <span className="font-medium">
+                          {assignment.trainer?.firstName}{" "}
+                          {assignment.trainer?.lastName}
+                        </span>
+                      </div>
+                      <span className="text-gray-400">→</span>
+                      <span>
+                        {assignment.client?.firstName}{" "}
+                        {assignment.client?.lastName}
+                      </span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-xs text-gray-500">
+                        Assigned{" "}
+                        {new Date(assignment.assignedAt).toLocaleDateString()}
+                      </span>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemoveAssignment(assignment.id)}
+                      >
+                        <UserX className="w-4 h-4 text-red-600" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        {/* Inactive Assignments */}
+        {getInactiveAssignments().length > 0 && (
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle className="text-gray-500">
+                  Inactive Assignments
+                </CardTitle>
+                <Badge variant="secondary">
+                  {getInactiveAssignments().length}
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {getInactiveAssignments().map((assignment) => (
+                  <div
+                    key={assignment.id}
+                    className="flex items-center justify-between p-4 border rounded-lg bg-gray-50 opacity-60"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <span className="font-medium text-gray-600">
+                        {assignment.trainer?.firstName}{" "}
+                        {assignment.trainer?.lastName}
+                      </span>
+                      <span className="text-gray-400">→</span>
+                      <span className="text-gray-600">
+                        {assignment.client?.firstName}{" "}
+                        {assignment.client?.lastName}
+                      </span>
+                    </div>
+                    <Badge variant="secondary">Inactive</Badge>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}
@@ -1,11 +1,30 @@
-import { UserManagement } from '@/components/users/UserManagement'
+"use client";
+
+import { UserManagement } from "@/components/users/UserManagement";
+import { PageHeader } from "@/components/ui/PageHeader";
+import { useUser } from "@clerk/nextjs";
+import { useSearchParams } from "next/navigation";
+import { GymSelector } from "@/components/gym/GymSelector";

 export default function UsersPage() {
+  const { user } = useUser();
+  const searchParams = useSearchParams();
+
+  const userRole = (user?.publicMetadata?.role as string) ?? "client";
+  const gymId = searchParams.get("gymId") ?? undefined;
+
  return (
-    <main className="min-h-screen bg-gray-50">
-      <div className="container mx-auto px-4 py-8">
-        <UserManagement />
+    <div className="space-y-8">
+      <PageHeader
+        title="Users"
+        description="Manage your gym members, trainers, and administrators"
+        breadcrumbs={[{ label: "Users", href: "/users" }]}
+        actions={<GymSelector userRole={userRole} />}
+      />
+
+      <div className="card-modern">
+        <UserManagement gymId={gymId} />
      </div>
-    </main>
-  )
-}
+    </div>
+  );
+}
@@ -71,11 +71,11 @@ export function Navigation(): ReactElement {
              <li key={item.href}>
                <Link href={item.href} className="flex items-center gap-2">
                  <Button
-                    variant={pathname === item.href ? "primary" : "secondary"}
+                    variant={pathname === item.href ? "default" : "secondary"}
                    className={cn(
                      "h-9 px-4 py-2",
                      pathname === item.href &&
-                      "bg-primary text-primary-foreground",
+                        "bg-primary text-primary-foreground",
                    )}
                    aria-current={pathname === item.href ? "page" : undefined}
                  >
@@ -1,75 +1,38 @@
-'use client'
+"use client";

-import { useState, useEffect } from 'react'
-import { UserGrowthChart } from '@/components/charts/UserGrowthChart'
-import { MembershipDistributionChart } from '@/components/charts/MembershipDistributionChart'
-import { RevenueChart } from '@/components/charts/RevenueChart'
-import { Card, CardHeader, CardContent } from '@/components/ui/card'
+import { UserGrowthChart } from "@/components/charts/UserGrowthChart";
+import { MembershipDistributionChart } from "@/components/charts/MembershipDistributionChart";
+import { RevenueChart } from "@/components/charts/RevenueChart";
+import { Card, CardHeader, CardContent } from "@/components/ui/card";
+import { useAnalytics } from "@/hooks/use-api";

-interface ChartData {
-  label: string
-  value: number
-  color?: string
+interface AnalyticsDashboardProps {
+  gymId?: string;
 }

-export function AnalyticsDashboard() {
-  const [userGrowthData, setUserGrowthData] = useState<ChartData[]>([])
-  const [membershipData, setMembershipData] = useState<ChartData[]>([])
-  const [revenueData, setRevenueData] = useState<ChartData[]>([])
-  const [loading, setLoading] = useState(true)
+export function AnalyticsDashboard({ gymId }: AnalyticsDashboardProps) {
+  const { data: analytics, isLoading } = useAnalytics(6, gymId);

-  useEffect(() => {
-    fetchAnalyticsData()
-  }, [])
+  const userGrowthData = analytics?.userGrowth ?? [];
+  const membershipData = analytics?.membershipDistribution ?? [];
+  const revenueData = analytics?.revenue ?? [];

-  const fetchAnalyticsData = async () => {
-    setLoading(true)
-    try {
-      // Mock data for demonstration - replace with real API calls
-      const mockUserGrowth = [
-        { label: 'Jan', value: 45 },
-        { label: 'Feb', value: 52 },
-        { label: 'Mar', value: 61 },
-        { label: 'Apr', value: 58 },
-        { label: 'May', value: 67 },
-        { label: 'Jun', value: 74 },
-      ]
+  const totalUsers =
+    userGrowthData.length > 0
+      ? userGrowthData[userGrowthData.length - 1].value
+      : 0;
+  const totalRevenue = revenueData.reduce((sum, item) => sum + item.value, 0);
+  const activeMembers = membershipData.reduce(
+    (sum, item) => sum + item.value,
+    0,
+  );

-      const mockMembershipData = [
-        { label: 'Basic', value: 45, color: '#6b7280' },
-        { label: 'Premium', value: 28, color: '#3b82f6' },
-        { label: 'VIP', value: 12, color: '#f59e0b' },
-      ]
-
-      const mockRevenueData = [
-        { label: 'Jan', value: 12500, color: '#10b981' },
-        { label: 'Feb', value: 14200, color: '#10b981' },
-        { label: 'Mar', value: 16800, color: '#10b981' },
-        { label: 'Apr', value: 15900, color: '#10b981' },
-        { label: 'May', value: 18200, color: '#10b981' },
-        { label: 'Jun', value: 19400, color: '#10b981' },
-      ]
-
-      setUserGrowthData(mockUserGrowth)
-      setMembershipData(mockMembershipData)
-      setRevenueData(mockRevenueData)
-    } catch (error) {
-      console.error('Failed to fetch analytics data:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const totalUsers = userGrowthData.length > 0 ? userGrowthData[userGrowthData.length - 1].value : 0
-  const totalRevenue = revenueData.reduce((sum, item) => sum + item.value, 0)
-  const activeMembers = membershipData.reduce((sum, item) => sum + item.value, 0)
-
-  if (loading) {
+  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="text-lg">Loading analytics...</div>
      </div>
-    )
+    );
  }

  return (
@@ -81,7 +44,9 @@ export function AnalyticsDashboard() {
        <Card>
          <CardContent>
            <div className="text-center">
-              <div className="text-3xl font-bold text-blue-600">{totalUsers}</div>
+              <div className="text-3xl font-bold text-blue-600">
+                {totalUsers}
+              </div>
              <div className="text-gray-600">Total Users</div>
            </div>
          </CardContent>
@@ -90,7 +55,9 @@ export function AnalyticsDashboard() {
        <Card>
          <CardContent>
            <div className="text-center">
-              <div className="text-3xl font-bold text-green-600">${totalRevenue.toLocaleString()}</div>
+              <div className="text-3xl font-bold text-green-600">
+                ${totalRevenue.toLocaleString()}
+              </div>
              <div className="text-gray-600">Total Revenue</div>
            </div>
          </CardContent>
@@ -99,7 +66,9 @@ export function AnalyticsDashboard() {
        <Card>
          <CardContent>
            <div className="text-center">
-              <div className="text-3xl font-bold text-purple-600">{activeMembers}</div>
+              <div className="text-3xl font-bold text-purple-600">
+                {activeMembers}
+              </div>
              <div className="text-gray-600">Active Members</div>
            </div>
          </CardContent>
@@ -133,14 +102,14 @@ export function AnalyticsDashboard() {
        </CardHeader>
        <CardContent>
          <RevenueChart
-            data={revenueData.map(item => ({
+            data={revenueData.map((item) => ({
              category: item.label,
              value: item.value,
-              color: item.color
+              color: item.color,
            }))}
          />
        </CardContent>
      </Card>
    </div>
-  )
+  );
 }
@@ -0,0 +1,132 @@
+"use client";
+
+import React from "react";
+import { AgCharts } from "ag-charts-react";
+import {
+  AgBarSeriesOptions,
+  AgChartOptions,
+  AgLineSeriesOptions,
+  AgPieSeriesOptions,
+} from "ag-charts-community";
+
+export function BarChart({
+  data,
+  xKey,
+  yKey,
+  color = "#3c82e6",
+  height = 300,
+}: {
+  data: any[];
+  xKey: string;
+  yKey: string;
+  color?: string;
+  height?: number;
+}) {
+  const options: AgChartOptions = {
+    data,
+    series: [
+      {
+        type: "bar",
+        xKey,
+        yKey,
+        fill: color,
+      } as AgBarSeriesOptions,
+    ],
+    height,
+  };
+
+  return <AgCharts options={options} />;
+}
+
+export function LineChart({
+  data,
+  xKey,
+  yKey,
+  color = "#3b82f6",
+  height = 300,
+}: {
+  data: any[];
+  xKey: string;
+  yKey: string;
+  color?: string;
+  height?: number;
+}) {
+  const options: AgChartOptions = {
+    data,
+    series: [
+      {
+        type: "line",
+        xKey,
+        yKey,
+        stroke: color,
+        strokeWidth: 3,
+        marker: {
+          size: 6,
+          fill: color,
+          stroke: "#ffffff",
+          strokeWidth: 2,
+        },
+      } as AgLineSeriesOptions,
+    ],
+    height,
+  };
+
+  return <AgCharts options={options} />;
+}
+
+export function PieChart({
+  data,
+  labelKey,
+  valueKey,
+  height = 300,
+}: {
+  data: any[];
+  labelKey: string;
+  valueKey: string;
+  height?: number;
+}) {
+  const options: AgChartOptions = {
+    data,
+    series: [
+      {
+        type: "pie",
+        labelKey,
+        angleKey: valueKey,
+      } as AgPieSeriesOptions,
+    ],
+    height,
+  };
+
+  return <AgCharts options={options} />;
+}
+
+export function AreaChart({
+  data,
+  xKey,
+  yKey,
+  color = "#3b82f6",
+  height = 300,
+}: {
+  data: any[];
+  xKey: string;
+  yKey: string;
+  color?: string;
+  height?: number;
+}) {
+  const options: AgChartOptions = {
+    data,
+    series: [
+      {
+        type: "area",
+        xKey,
+        yKey,
+        fill: color,
+        stroke: color,
+        strokeWidth: 2,
+      },
+    ],
+    height,
+  };
+
+  return <AgCharts options={options} />;
+}
@@ -0,0 +1,91 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+interface Gym {
+  id: string;
+  name: string;
+}
+
+interface GymSelectorProps {
+  currentGymId?: string;
+  userRole: string;
+}
+
+export function GymSelector({ userRole }: GymSelectorProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [gyms, setGyms] = useState<Gym[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Only fetch gyms for superAdmin
+    if (userRole !== "superAdmin") {
+      setLoading(false);
+      return;
+    }
+
+    async function fetchGyms() {
+      try {
+        const response = await fetch("/api/gyms");
+        const data = await response.json();
+
+        // API returns array directly
+        if (Array.isArray(data)) {
+          setGyms(data);
+        }
+      } catch (error) {
+        console.error("Failed to fetch gyms:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchGyms();
+  }, [userRole]);
+
+  const handleGymChange = (gymId: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (gymId === "all") {
+      params.delete("gymId");
+    } else {
+      params.set("gymId", gymId);
+    }
+
+    router.push(`?${params.toString()}`);
+  };
+
+  // Only show for superAdmin
+  if (userRole !== "superAdmin") {
+    return null;
+  }
+
+  const selectedGymId = searchParams.get("gymId") ?? "all";
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2">
+        <div className="h-9 w-40 animate-pulse rounded-md bg-muted" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <select
+        value={selectedGymId}
+        onChange={(e) => handleGymChange(e.target.value)}
+        className="h-9 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+      >
+        <option value="all">All Gyms</option>
+        {gyms.map((gym) => (
+          <option key={gym.id} value={gym.id}>
+            {gym.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
@@ -0,0 +1,26 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState, type ReactNode } from "react";
+
+interface QueryProviderProps {
+  children: ReactNode;
+}
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            refetchOnWindowFocus: false,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}
@@ -0,0 +1,7 @@
+"use client";
+
+import { Toaster } from "sonner";
+
+export function ToasterProvider() {
+  return <Toaster richColors position="top-right" />;
+}
@@ -0,0 +1,108 @@
+"use client";
+
+import { GoalSummary } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+interface GoalsSummaryCardProps {
+  goals: GoalSummary;
+}
+
+export function GoalsSummaryCard({ goals }: GoalsSummaryCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Fitness Goals</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Summary Stats */}
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {goals.totalActive}
+            </div>
+            <div className="text-xs text-gray-600">Active Goals</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {goals.totalCompleted}
+            </div>
+            <div className="text-xs text-gray-600">Completed</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-purple-600">
+              {goals.averageProgress}%
+            </div>
+            <div className="text-xs text-gray-600">Avg Progress</div>
+          </div>
+        </div>
+
+        {/* Active Goals */}
+        {goals.active.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Active Goals</h4>
+            <div className="space-y-2">
+              {goals.active.map((goal) => (
+                <div key={goal.id} className="border rounded-lg p-3">
+                  <div className="flex justify-between items-start mb-2">
+                    <div className="font-medium">{goal.title}</div>
+                    <Badge
+                      variant={
+                        goal.priority === "high" ? "destructive" : "secondary"
+                      }
+                    >
+                      {goal.priority}
+                    </Badge>
+                  </div>
+                  <div className="text-xs text-gray-600 mb-2">
+                    {goal.goalType.replace("_", " ")}
+                  </div>
+                  {/* Progress Bar */}
+                  <div className="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      className="bg-blue-600 h-2 rounded-full transition-all"
+                      style={{ width: `${goal.progress}%` }}
+                    />
+                  </div>
+                  <div className="text-xs text-gray-600 mt-1">
+                    {goal.progress}% complete
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Completed Goals */}
+        {goals.completed.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Completed Goals</h4>
+            <div className="space-y-1">
+              {goals.completed.map((goal) => (
+                <div
+                  key={goal.id}
+                  className="flex justify-between items-center text-sm p-2 bg-green-50 rounded"
+                >
+                  <span className="font-medium">{goal.title}</span>
+                  <span className="text-xs text-green-700">
+                    ✓{" "}
+                    {goal.completedDate
+                      ? new Date(goal.completedDate).toLocaleDateString()
+                      : "N/A"}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {goals.active.length === 0 && goals.completed.length === 0 && (
+          <div className="text-center text-gray-500 py-8">
+            No goals found for this period
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,119 @@
+"use client";
+
+import { HydrationSummary } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+} from "recharts";
+
+interface HydrationSummaryCardProps {
+  hydration: {
+    dailySummaries: HydrationSummary[];
+    averageDailyWater: number;
+    totalDays: number;
+    daysMetGoal: number;
+  };
+}
+
+export function HydrationSummaryCard({ hydration }: HydrationSummaryCardProps) {
+  const goalMetPercentage =
+    hydration.totalDays > 0
+      ? Math.round((hydration.daysMetGoal / hydration.totalDays) * 100)
+      : 0;
+
+  const chartData = [
+    { name: "Days Met Goal", value: hydration.daysMetGoal, color: "#06b6d4" },
+    {
+      name: "Days Under Goal",
+      value: hydration.totalDays - hydration.daysMetGoal,
+      color: "#f59e0b",
+    },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Hydration Summary</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Summary Stats */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {(hydration.averageDailyWater / 1000).toFixed(1)}L
+            </div>
+            <div className="text-xs text-gray-600">Avg Daily Water</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-cyan-600">
+              {hydration.totalDays}
+            </div>
+            <div className="text-xs text-gray-600">Days Tracked</div>
+          </div>
+        </div>
+
+        {/* Goal Achievement */}
+        <div className="text-center">
+          <div className="text-3xl font-bold text-green-600">
+            {goalMetPercentage}%
+          </div>
+          <div className="text-xs text-gray-600">Days Met Hydration Goal</div>
+        </div>
+
+        {/* Chart */}
+        {hydration.totalDays > 0 && (
+          <div className="h-48">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={chartData}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={40}
+                  outerRadius={70}
+                  paddingAngle={5}
+                  dataKey="value"
+                >
+                  {chartData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
+        {/* Recent Days */}
+        {hydration.dailySummaries.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Recent Days</h4>
+            <div className="max-h-32 overflow-y-auto space-y-1">
+              {hydration.dailySummaries
+                .slice(-5)
+                .reverse()
+                .map((day) => (
+                  <div
+                    key={day.date}
+                    className="flex justify-between items-center text-sm"
+                  >
+                    <span className="text-gray-600">{day.date}</span>
+                    <span className="font-medium">
+                      {day.totalWater}ml / {day.waterGoal}ml (
+                      {day.hydrationPercentage}%)
+                    </span>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,121 @@
+"use client";
+
+import { NutritionSummary } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Legend,
+  Tooltip,
+} from "recharts";
+
+interface NutritionSummaryCardProps {
+  nutrition: {
+    dailySummaries: NutritionSummary[];
+    averageDailyCalories: number;
+    totalDays: number;
+    daysMetGoal: number;
+  };
+}
+
+export function NutritionSummaryCard({ nutrition }: NutritionSummaryCardProps) {
+  const goalMetPercentage =
+    nutrition.totalDays > 0
+      ? Math.round((nutrition.daysMetGoal / nutrition.totalDays) * 100)
+      : 0;
+
+  const chartData = [
+    { name: "Days Met Goal", value: nutrition.daysMetGoal, color: "#10b981" },
+    {
+      name: "Days Over/Under",
+      value: nutrition.totalDays - nutrition.daysMetGoal,
+      color: "#f59e0b",
+    },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Nutrition Summary</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Summary Stats */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {nutrition.averageDailyCalories.toLocaleString()}
+            </div>
+            <div className="text-xs text-gray-600">Avg Daily Calories</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {nutrition.totalDays}
+            </div>
+            <div className="text-xs text-gray-600">Days Tracked</div>
+          </div>
+        </div>
+
+        {/* Goal Achievement */}
+        <div className="text-center">
+          <div className="text-3xl font-bold text-purple-600">
+            {goalMetPercentage}%
+          </div>
+          <div className="text-xs text-gray-600">
+            Days Met Calorie Goal (±10%)
+          </div>
+        </div>
+
+        {/* Chart */}
+        {nutrition.totalDays > 0 && (
+          <div className="h-48">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={chartData}
+                  cx="50%"
+                  cy="50%"
+                  innerRadius={40}
+                  outerRadius={70}
+                  paddingAngle={5}
+                  dataKey="value"
+                >
+                  {chartData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
+        {/* Recent Days */}
+        {nutrition.dailySummaries.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Recent Days</h4>
+            <div className="max-h-32 overflow-y-auto space-y-1">
+              {nutrition.dailySummaries
+                .slice(-5)
+                .reverse()
+                .map((day) => (
+                  <div
+                    key={day.date}
+                    className="flex justify-between items-center text-sm"
+                  >
+                    <span className="text-gray-600">{day.date}</span>
+                    <span className="font-medium">
+                      {day.totalCalories.toLocaleString()} /{" "}
+                      {day.calorieGoal.toLocaleString()} cal
+                    </span>
+                  </div>
+                ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,130 @@
+"use client";
+
+import { RecommendationSummary } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+interface RecommendationsCardProps {
+  recommendations: RecommendationSummary;
+}
+
+export function RecommendationsCard({
+  recommendations,
+}: RecommendationsCardProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>AI Recommendations</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* Summary Stats */}
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {recommendations.totalAccepted}
+            </div>
+            <div className="text-xs text-gray-600">Accepted</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-yellow-600">
+              {recommendations.totalPending}
+            </div>
+            <div className="text-xs text-gray-600">Pending</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-red-600">
+              {recommendations.totalRejected}
+            </div>
+            <div className="text-xs text-gray-600">Rejected</div>
+          </div>
+        </div>
+
+        {/* Accepted Recommendations */}
+        {recommendations.accepted.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-green-700">
+              Accepted Recommendations
+            </h4>
+            <div className="space-y-2">
+              {recommendations.accepted.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="border border-green-200 bg-green-50 rounded-lg p-3"
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <Badge variant="default" className="bg-green-600">
+                      Accepted
+                    </Badge>
+                    <span className="text-xs text-gray-500">
+                      {new Date(rec.generatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="text-sm">{rec.recommendationText}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Pending Recommendations */}
+        {recommendations.pending.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-yellow-700">
+              Pending Recommendations
+            </h4>
+            <div className="space-y-2">
+              {recommendations.pending.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="border border-yellow-200 bg-yellow-50 rounded-lg p-3"
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <Badge variant="secondary">Pending</Badge>
+                    <span className="text-xs text-gray-500">
+                      {new Date(rec.generatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="text-sm">{rec.recommendationText}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Rejected Recommendations */}
+        {recommendations.rejected.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold text-red-700">
+              Rejected Recommendations
+            </h4>
+            <div className="space-y-2">
+              {recommendations.rejected.map((rec) => (
+                <div
+                  key={rec.id}
+                  className="border border-red-200 bg-red-50 rounded-lg p-3"
+                >
+                  <div className="flex justify-between items-start mb-2">
+                    <Badge variant="destructive">Rejected</Badge>
+                    <span className="text-xs text-gray-500">
+                      {new Date(rec.generatedAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                  <div className="text-sm">{rec.recommendationText}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Empty State */}
+        {recommendations.totalAccepted === 0 &&
+          recommendations.totalPending === 0 &&
+          recommendations.totalRejected === 0 && (
+            <div className="text-center text-gray-500 py-8">
+              No recommendations found for this period
+            </div>
+          )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,195 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { User, Client } from "@fitai/shared";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { useUser } from "@clerk/nextjs";
+import log from "@/lib/logger";
+
+interface ReportFiltersProps {
+  selectedUserId: string;
+  onUserChange: (userId: string) => void;
+  dateRange: {
+    startDate: string;
+    endDate: string;
+  };
+  onDateRangeChange: (range: { startDate: string; endDate: string }) => void;
+}
+
+export function ReportFilters({
+  selectedUserId,
+  onUserChange,
+  dateRange,
+  onDateRangeChange,
+}: ReportFiltersProps) {
+  const { user: clerkUser } = useUser();
+  const [users, setUsers] = useState<(User & { client?: Client | null })[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    fetchCurrentUserAndClients();
+  }, []);
+
+  const fetchCurrentUserAndClients = async () => {
+    try {
+      setLoading(true);
+
+      // Fetch current user info
+      const userResponse = await fetch("/api/users/me");
+      if (userResponse.ok) {
+        const userData = await userResponse.json();
+        setCurrentUser(userData.user);
+
+        // Determine which clients to show based on role
+        if (userData.user.role === "client") {
+          // Regular users can only view their own report
+          setUsers([userData.user]);
+          onUserChange(userData.user.id);
+        } else if (userData.user.role === "trainer") {
+          // Trainers can only view their assigned clients
+          const assignmentsRes = await fetch("/api/trainer-client");
+          if (assignmentsRes.ok) {
+            const assignmentsData = await assignmentsRes.json();
+            const assignedClientIds = (assignmentsData.assignments || [])
+              .filter((a: any) => a.isActive)
+              .map((a: any) => a.clientId);
+
+            if (assignedClientIds.length > 0) {
+              // Fetch assigned clients
+              const clientsRes = await fetch(
+                `/api/users?role=client&ids=${assignedClientIds.join(",")}`,
+              );
+              if (clientsRes.ok) {
+                const clientsData = await clientsRes.json();
+                setUsers(clientsData.users || []);
+              }
+            } else {
+              setUsers([]);
+            }
+          }
+        } else {
+          // Admins and superadmins can view all clients
+          const clientsRes = await fetch("/api/users?role=client");
+          if (clientsRes.ok) {
+            const clientsData = await clientsRes.json();
+            setUsers(clientsData.users || []);
+          }
+        }
+      }
+    } catch (error) {
+      log.error("Failed to fetch users:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePresetRange = (days: number) => {
+    const end = new Date();
+    const start = new Date(Date.now() - days * 24 * 60 * 60 * 1000);
+    onDateRangeChange({
+      startDate: start.toISOString().split("T")[0],
+      endDate: end.toISOString().split("T")[0],
+    });
+  };
+
+  return (
+    <Card>
+      <CardContent className="p-6">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          {/* User Selector */}
+          <div className="space-y-2">
+            <Label htmlFor="user-select">Select User</Label>
+            <Select
+              value={selectedUserId}
+              onValueChange={onUserChange}
+              disabled={loading}
+            >
+              <SelectTrigger id="user-select">
+                <SelectValue placeholder="Choose a user..." />
+              </SelectTrigger>
+              <SelectContent>
+                {users.map((user) => (
+                  <SelectItem key={user.id} value={user.id}>
+                    {user.firstName} {user.lastName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Start Date */}
+          <div className="space-y-2">
+            <Label htmlFor="start-date">Start Date</Label>
+            <input
+              id="start-date"
+              type="date"
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              value={dateRange.startDate}
+              onChange={(e) =>
+                onDateRangeChange({
+                  ...dateRange,
+                  startDate: e.target.value,
+                })
+              }
+            />
+          </div>
+
+          {/* End Date */}
+          <div className="space-y-2">
+            <Label htmlFor="end-date">End Date</Label>
+            <input
+              id="end-date"
+              type="date"
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+              value={dateRange.endDate}
+              onChange={(e) =>
+                onDateRangeChange({
+                  ...dateRange,
+                  endDate: e.target.value,
+                })
+              }
+            />
+          </div>
+
+          {/* Preset Ranges */}
+          <div className="space-y-2">
+            <Label>Quick Select</Label>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handlePresetRange(7)}
+              >
+                7 Days
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handlePresetRange(30)}
+              >
+                30 Days
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => handlePresetRange(90)}
+              >
+                90 Days
+              </Button>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { UserReport as UserReportType } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { WeeklyCheckInsCard } from "./WeeklyCheckInsCard";
+import { NutritionSummaryCard } from "./NutritionSummaryCard";
+import { HydrationSummaryCard } from "./HydrationSummaryCard";
+import { GoalsSummaryCard } from "./GoalsSummaryCard";
+import { RecommendationsCard } from "./RecommendationsCard";
+import { Button } from "@/components/ui/button";
+import { Download } from "lucide-react";
+
+interface UserReportProps {
+  userId: string;
+  startDate: string;
+  endDate: string;
+}
+
+export function UserReport({ userId, startDate, endDate }: UserReportProps) {
+  const [report, setReport] = useState<UserReportType | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchReport();
+  }, [userId, startDate, endDate]);
+
+  const fetchReport = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const response = await fetch(
+        `/api/reports/user/${userId}?startDate=${startDate}&endDate=${endDate}`,
+      );
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to fetch report");
+      }
+
+      const data = await response.json();
+      setReport(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load report");
+      console.error("Report fetch error:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleExportPDF = () => {
+    if (!report) return;
+
+    const filename = `FitAI_Report_${report.user.firstName}_${report.user.lastName}_${startDate}_${endDate}.pdf`;
+    const url = `/api/reports/user/${userId}?startDate=${startDate}&endDate=${endDate}&format=pdf`;
+
+    // Open in new tab to trigger download
+    window.open(url, "_blank");
+  };
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center h-64">
+          <div className="text-lg text-gray-600">Loading report...</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center h-64">
+          <div className="text-lg text-red-600">{error}</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!report) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center h-64">
+          <div className="text-lg text-gray-600">No report data available</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Report Header */}
+      <Card>
+        <CardHeader>
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle className="text-2xl">
+                {report.user.firstName} {report.user.lastName}
+              </CardTitle>
+              <p className="text-sm text-gray-600 mt-1">
+                {report.user.email} • {report.client?.membershipType || "N/A"}{" "}
+                Member
+              </p>
+              <p className="text-xs text-gray-500 mt-1">
+                Report Period: {report.reportPeriod.startDate} to{" "}
+                {report.reportPeriod.endDate}
+              </p>
+            </div>
+            <Button onClick={handleExportPDF} variant="default">
+              <Download className="w-4 h-4 mr-2" />
+              Export PDF
+            </Button>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Report Sections */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <WeeklyCheckInsCard weeklyCheckIns={report.weeklyCheckIns} />
+        <NutritionSummaryCard nutrition={report.nutrition} />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <HydrationSummaryCard hydration={report.hydration} />
+        <GoalsSummaryCard goals={report.goals} />
+      </div>
+
+      <div className="grid grid-cols-1 gap-6">
+        <RecommendationsCard recommendations={report.recommendations} />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,110 @@
+"use client";
+
+import { WeeklyCheckInStats } from "@fitai/shared";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+interface WeeklyCheckInsCardProps {
+  weeklyCheckIns: WeeklyCheckInStats[];
+}
+
+export function WeeklyCheckInsCard({
+  weeklyCheckIns,
+}: WeeklyCheckInsCardProps) {
+  const totalCheckIns = weeklyCheckIns.reduce(
+    (sum, week) => sum + week.totalCheckIns,
+    0,
+  );
+  const totalTimeMinutes = weeklyCheckIns.reduce(
+    (sum, week) => sum + week.totalTimeMinutes,
+    0,
+  );
+  const avgTimeMinutes =
+    totalCheckIns > 0 ? Math.round(totalTimeMinutes / totalCheckIns) : 0;
+
+  const chartData = weeklyCheckIns.map((week) => ({
+    week: week.weekStart,
+    checkIns: week.totalCheckIns,
+    timeMinutes: week.totalTimeMinutes,
+  }));
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Weekly Check-ins</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-blue-600">
+              {totalCheckIns}
+            </div>
+            <div className="text-xs text-gray-600">Total Check-ins</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-green-600">
+              {Math.floor(totalTimeMinutes / 60)}h {totalTimeMinutes % 60}m
+            </div>
+            <div className="text-xs text-gray-600">Total Time</div>
+          </div>
+          <div className="text-center">
+            <div className="text-2xl font-bold text-purple-600">
+              {avgTimeMinutes}m
+            </div>
+            <div className="text-xs text-gray-600">Avg Duration</div>
+          </div>
+        </div>
+
+        {chartData.length > 0 ? (
+          <div className="h-64">
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={chartData}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="week" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="checkIns" fill="#3c82e6" name="Check-ins" />
+                <Bar dataKey="timeMinutes" fill="#10b981" name="Minutes" />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        ) : (
+          <div className="h-64 flex items-center justify-center text-gray-500">
+            No check-in data available
+          </div>
+        )}
+
+        {weeklyCheckIns.length > 0 && (
+          <div className="space-y-2">
+            <h4 className="text-sm font-semibold">Weekly Breakdown</h4>
+            <div className="space-y-1">
+              {weeklyCheckIns.slice(-4).map((week) => (
+                <div
+                  key={week.weekStart}
+                  className="flex justify-between items-center text-sm"
+                >
+                  <span className="text-gray-600">
+                    {week.weekStart} - {week.weekEnd}
+                  </span>
+                  <span className="font-medium">
+                    {week.totalCheckIns} check-ins • {week.totalTimeMinutes} min
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
@@ -0,0 +1,101 @@
+import { cn } from "@/lib/utils";
+import { ChevronRight, Home } from "lucide-react";
+import Link from "next/link";
+
+interface Breadcrumb {
+  label: string;
+  href?: string;
+}
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  breadcrumbs?: Breadcrumb[];
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageHeader({
+  title,
+  description,
+  breadcrumbs,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div className={cn("space-y-4", className)}>
+      {breadcrumbs && breadcrumbs.length > 0 && (
+        <nav className="flex items-center gap-1 text-sm">
+          <Link
+            href="/"
+            className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <Home className="h-4 w-4" />
+            <span>Home</span>
+          </Link>
+          {breadcrumbs.map((crumb, index) => (
+            <span key={index} className="flex items-center gap-1">
+              <ChevronRight className="h-4 w-4 text-muted-foreground" />
+              {crumb.href ? (
+                <Link
+                  href={crumb.href}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  {crumb.label}
+                </Link>
+              ) : (
+                <span className="font-medium text-foreground">
+                  {crumb.label}
+                </span>
+              )}
+            </span>
+          ))}
+        </nav>
+      )}
+      <div className="flex items-start justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-bold tracking-tight">{title}</h1>
+          {description && (
+            <p className="text-muted-foreground">{description}</p>
+          )}
+        </div>
+        {actions && <div className="flex items-center gap-3">{actions}</div>}
+      </div>
+    </div>
+  );
+}
+
+interface PageSectionProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+export function PageSection({
+  title,
+  description,
+  children,
+  actions,
+  className,
+}: PageSectionProps) {
+  return (
+    <section className={cn("space-y-4", className)}>
+      {(title || actions) && (
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1">
+            {title && (
+              <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+            )}
+            {description && (
+              <p className="text-sm text-muted-foreground">{description}</p>
+            )}
+          </div>
+          {actions && <div className="flex items-center gap-2">{actions}</div>}
+        </div>
+      )}
+      {children}
+    </section>
+  );
+}
@@ -9,60 +9,48 @@ import {
  CalendarCheck,
  CreditCard,
  Settings,
-  LogOut,
  Brain,
+  ChevronLeft,
+  Activity,
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
+import { usePendingRecommendationsCount } from "@/hooks/use-api";
+import { cn } from "@/lib/utils";

-interface Recommendation {
-  id: string;
-  status: string;
+interface NavItem {
+  icon: React.ElementType;
+  label: string;
+  href: string;
+  badge?: number;
 }

 export function Sidebar() {
  const pathname = usePathname();
  const { user } = useUser();
-  const [pendingCount, setPendingCount] = useState(0);
+  const { data: pendingCount = 0 } = usePendingRecommendationsCount();
  const [mounted, setMounted] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);

  useEffect(() => {
    setMounted(true);
+    const saved = localStorage.getItem("sidebar-collapsed");
+    if (saved) setIsCollapsed(JSON.parse(saved));
  }, []);

-  useEffect(() => {
-    const fetchPending = async () => {
-      try {
-        const res = await fetch("/api/recommendations");
-        if (res.ok) {
-          const data = await res.json();
-          const pending = (data.recommendations || []).filter(
-            (r: Recommendation) => r.status === "pending",
-          );
-          setPendingCount(pending.length);
-        }
-      } catch (e) {
-        console.error("Failed to fetch pending recommendations", e);
-      }
-    };
-    fetchPending();
-  }, []);
+  const handleToggle = () => {
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    localStorage.setItem("sidebar-collapsed", JSON.stringify(newState));
+  };

-  const menuItems = [
+  const navItems: NavItem[] = [
    { icon: LayoutDashboard, label: "Dashboard", href: "/" },
    { icon: Users, label: "Users", href: "/users" },
    {
      icon: Brain,
-      label: (
-        <span className="flex items-center">
-          AI Recommendations
-          {pendingCount > 0 && (
-            <span className="ml-2 inline-block bg-red-600 text-xs rounded-full px-2 py-0.5">
-              {pendingCount}
-            </span>
-          )}
-        </span>
-      ),
+      label: "AI Recommendations",
      href: "/recommendations",
+      badge: pendingCount > 0 ? pendingCount : undefined,
    },
    { icon: CalendarCheck, label: "Attendance", href: "/attendance" },
    { icon: CreditCard, label: "Payments", href: "/payments" },
@@ -70,59 +58,126 @@ export function Sidebar() {
  ];

  return (
-    <aside className="w-20 hover:w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800 transition-all duration-300 z-50 group overflow-hidden">
-      <div className="p-6 border-b border-slate-800 flex items-center overflow-hidden whitespace-nowrap">
-        <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-          FitAI Admin
-        </h1>
-      </div>
+    <aside
+      className={cn(
+        "fixed left-0 top-0 z-40 h-screen transition-all duration-300 ease-in-out",
+        isCollapsed ? "w-[72px]" : "w-[260px]",
+        "bg-gradient-to-b from-[var(--sidebar-background)] to-[#0f172a]",
+      )}
+    >
+      <div className="flex h-full flex-col border-r border-white/5">
+        {/* Logo */}
+        <div
+          className={cn(
+            "flex h-16 items-center border-b border-white/5 px-4",
+            isCollapsed ? "justify-center" : "justify-between",
+          )}
+        >
+          {!isCollapsed && (
+            <Link href="/" className="flex items-center gap-2">
+              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg shadow-blue-500/25">
+                <Activity className="h-5 w-5 text-white" />
+              </div>
+              <span className="text-lg font-bold text-white">FitAI</span>
+            </Link>
+          )}
+          {isCollapsed && (
+            <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg shadow-blue-500/25">
+              <Activity className="h-5 w-5 text-white" />
+            </div>
+          )}
+        </div>

-      <nav className="flex-1 p-4 space-y-2">
-        {menuItems.map((item) => {
-          const Icon = item.icon;
-          const isActive = pathname === item.href;
-          const label =
-            typeof item.label === "string" ? item.label : item.label;
-          return (
-            <Link
-              key={item.href}
-              href={item.href}
-              className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 ${
-                isActive
-                  ? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
-                  : "text-slate-400 hover:bg-slate-800 hover:text-white"
-              }`}
-            >
-              <div className="min-w-[20px]">
+        {/* Toggle Button */}
+        <button
+          onClick={handleToggle}
+          className={cn(
+            "absolute -right-3 top-20 z-50 flex h-6 w-6 items-center justify-center rounded-full border border-white/10 bg-slate-800 text-white/60 shadow-lg transition-all hover:bg-slate-700 hover:text-white",
+            isCollapsed ? "left-[60px]" : "left-[244px]",
+          )}
+        >
+          <ChevronLeft
+            className={cn(
+              "h-3.5 w-3.5 transition-transform",
+              isCollapsed && "rotate-180",
+            )}
+          />
+        </button>
+
+        {/* Navigation */}
+        <nav className="flex-1 space-y-1 overflow-y-auto p-3">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive =
+              pathname === item.href ||
+              (item.href !== "/" && pathname.startsWith(item.href));
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200",
+                  isActive
+                    ? "bg-gradient-to-r from-blue-600 to-blue-500 text-white shadow-lg shadow-blue-500/25"
+                    : "text-slate-400 hover:bg-white/5 hover:text-white",
+                  isCollapsed && "justify-center px-2",
+                )}
+              >
                <Icon
-                  size={20}
-                  className={
+                  className={cn(
+                    "h-5 w-5 flex-shrink-0 transition-colors",
                    isActive
                      ? "text-white"
-                      : "text-slate-500 group-hover:text-white"
-                  }
+                      : "text-slate-500 group-hover:text-white",
+                  )}
                />
-              </div>
-              <span className="font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap overflow-hidden">
-                {label}
-              </span>
-            </Link>
-          );
-        })}
-      </nav>
+                {!isCollapsed && (
+                  <>
+                    <span className="flex-1">{item.label}</span>
+                    {item.badge !== undefined && (
+                      <span className="flex h-5 min-w-[20px] items-center justify-center rounded-full bg-red-500 px-1.5 text-xs font-bold text-white">
+                        {item.badge > 99 ? "99+" : item.badge}
+                      </span>
+                    )}
+                  </>
+                )}
+                {isCollapsed && item.badge !== undefined && (
+                  <span className="absolute -right-1 -top-1 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-bold text-white">
+                    {item.badge > 9 ? "9+" : item.badge}
+                  </span>
+                )}
+              </Link>
+            );
+          })}
+        </nav>

-      <div className="p-4 border-t border-slate-800">
-        <div className="flex items-center gap-3 px-2 py-3 rounded-lg bg-slate-800/50 overflow-hidden whitespace-nowrap">
-          <div className="min-w-[32px]">
-            {mounted && <UserButton afterSignOutUrl="/" />}
-          </div>
-          <div className="flex-1 min-w-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-            <p className="text-sm font-medium text-white truncate">
-              {user?.fullName || "Admin User"}
-            </p>
-            <p className="text-xs text-slate-400 truncate">
-              {user?.primaryEmailAddress?.emailAddress}
-            </p>
+        {/* User Section */}
+        <div
+          className={cn(
+            "border-t border-white/5 p-3",
+            isCollapsed && "flex justify-center",
+          )}
+        >
+          <div
+            className={cn(
+              "flex items-center gap-3 rounded-lg bg-white/5 p-2 transition-colors hover:bg-white/10",
+              isCollapsed && "justify-center p-2",
+            )}
+          >
+            <div className={cn("flex-shrink-0", isCollapsed ? "" : "ml-1")}>
+              {mounted && <UserButton afterSignOutUrl="/" />}
+            </div>
+            {!isCollapsed && (
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium text-white">
+                  {user?.fullName || "Admin"}
+                </p>
+                <p className="truncate text-xs text-slate-400">
+                  {user?.primaryEmailAddress?.emailAddress}
+                </p>
+              </div>
+            )}
          </div>
        </div>
      </div>
@@ -1,51 +1,139 @@
 import { LucideIcon } from "lucide-react";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { TrendingUp, TrendingDown, Minus } from "lucide-react";

 interface StatsCardProps {
-    title: string;
-    value: string | number;
-    change?: string;
-    trend?: "up" | "down" | "neutral";
-    icon: LucideIcon;
-    color?: "blue" | "green" | "purple" | "orange";
+  title: string;
+  value: string | number;
+  change?: string;
+  trend?: "up" | "down" | "neutral";
+  icon: LucideIcon;
+  color?: "blue" | "green" | "purple" | "orange" | "red";
+  className?: string;
 }

-export function StatsCard({ title, value, change, trend, icon: Icon, color = "blue" }: StatsCardProps) {
-    const colorStyles = {
-        blue: "bg-blue-50 text-blue-600",
-        green: "bg-green-50 text-green-600",
-        purple: "bg-purple-50 text-purple-600",
-        orange: "bg-orange-50 text-orange-600",
-    };
+export function StatsCard({
+  title,
+  value,
+  change,
+  trend,
+  icon: Icon,
+  color = "blue",
+  className,
+}: StatsCardProps) {
+  const colorStyles = {
+    blue: {
+      gradient: "from-blue-500/10 to-blue-600/5",
+      iconBg: "bg-gradient-to-br from-blue-500 to-blue-600",
+      iconShadow: "shadow-blue-500/25",
+      text: "text-blue-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    green: {
+      gradient: "from-emerald-500/10 to-emerald-600/5",
+      iconBg: "bg-gradient-to-br from-emerald-500 to-emerald-600",
+      iconShadow: "shadow-emerald-500/25",
+      text: "text-emerald-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    purple: {
+      gradient: "from-violet-500/10 to-violet-600/5",
+      iconBg: "bg-gradient-to-br from-violet-500 to-violet-600",
+      iconShadow: "shadow-violet-500/25",
+      text: "text-violet-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    orange: {
+      gradient: "from-amber-500/10 to-amber-600/5",
+      iconBg: "bg-gradient-to-br from-amber-500 to-orange-600",
+      iconShadow: "shadow-amber-500/25",
+      text: "text-amber-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+    red: {
+      gradient: "from-rose-500/10 to-rose-600/5",
+      iconBg: "bg-gradient-to-br from-rose-500 to-rose-600",
+      iconShadow: "shadow-rose-500/25",
+      text: "text-rose-600",
+      trendUp: "text-emerald-600",
+      trendDown: "text-red-600",
+    },
+  };

-    return (
-        <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium text-muted-foreground">
-                    {title}
-                </CardTitle>
-                <div className={`p-2 rounded-lg ${colorStyles[color]}`}>
-                    <Icon size={16} />
-                </div>
-            </CardHeader>
-            <CardContent>
-                <div className="text-2xl font-bold">{value}</div>
-                {change && (
-                    <p className="text-xs text-muted-foreground mt-1">
-                        <span
-                            className={`font-medium ${trend === "up"
-                                    ? "text-green-600"
-                                    : trend === "down"
-                                        ? "text-red-600"
-                                        : "text-slate-600"
-                                }`}
-                        >
-                            {change}
-                        </span>{" "}
-                        vs last month
-                    </p>
+  const styles = colorStyles[color];
+  const TrendIcon =
+    trend === "up" ? TrendingUp : trend === "down" ? TrendingDown : Minus;
+
+  return (
+    <div
+      className={cn(
+        "group relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-br p-6 transition-all duration-300 hover:shadow-lg hover:-translate-y-1",
+        styles.gradient,
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-muted-foreground">{title}</p>
+          <div className="flex items-baseline gap-2">
+            <span className="text-3xl font-bold tracking-tight">{value}</span>
+          </div>
+          {change && (
+            <div className="flex items-center gap-1 text-sm">
+              <TrendIcon
+                className={cn(
+                  "h-4 w-4",
+                  trend === "up" && styles.trendUp,
+                  trend === "down" && styles.trendDown,
+                  trend === "neutral" && "text-muted-foreground",
                )}
-            </CardContent>
-        </Card>
-    );
+              />
+              <span
+                className={cn(
+                  "font-medium",
+                  trend === "up" && styles.trendUp,
+                  trend === "down" && styles.trendDown,
+                  trend === "neutral" && "text-muted-foreground",
+                )}
+              >
+                {change}
+              </span>
+              <span className="text-muted-foreground">vs last month</span>
+            </div>
+          )}
+        </div>
+        <div
+          className={cn(
+            "flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br shadow-lg transition-transform duration-300 group-hover:scale-110",
+            styles.iconBg,
+            styles.iconShadow,
+          )}
+        >
+          <Icon className="h-6 w-6 text-white" />
+        </div>
+      </div>
+
+      {/* Decorative corner gradient */}
+      <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-gradient-to-br from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
+    </div>
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="animate-pulse rounded-2xl border border-border/50 bg-gradient-to-br from-muted/30 to-muted/20 p-6">
+      <div className="flex items-start justify-between">
+        <div className="space-y-3">
+          <div className="h-4 w-24 rounded bg-muted" />
+          <div className="h-9 w-32 rounded bg-muted" />
+          <div className="h-4 w-20 rounded bg-muted" />
+        </div>
+        <div className="h-12 w-12 rounded-xl bg-muted" />
+      </div>
+    </div>
+  );
 }
@@ -0,0 +1,62 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary",
+        secondary: "bg-secondary text-secondary-foreground",
+        success:
+          "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
+        warning:
+          "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400",
+        destructive:
+          "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
+        info: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400",
+        outline: "border border-input text-foreground",
+        gray: "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-300",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export function StatusBadge({ status }: { status: string }) {
+  const statusConfig: Record<
+    string,
+    { variant: BadgeProps["variant"]; label: string }
+  > = {
+    active: { variant: "success", label: "Active" },
+    inactive: { variant: "gray", label: "Inactive" },
+    pending: { variant: "warning", label: "Pending" },
+    approved: { variant: "success", label: "Approved" },
+    rejected: { variant: "destructive", label: "Rejected" },
+    completed: { variant: "success", label: "Completed" },
+    failed: { variant: "destructive", label: "Failed" },
+    suspended: { variant: "destructive", label: "Suspended" },
+    basic: { variant: "default", label: "Basic" },
+    premium: { variant: "info", label: "Premium" },
+    vip: { variant: "warning", label: "VIP" },
+  };
+
+  const config = statusConfig[status.toLowerCase()] || {
+    variant: "outline",
+    label: status,
+  };
+
+  return <Badge variant={config.variant}>{config.label}</Badge>;
+}
@@ -1,49 +1,60 @@
-import React from 'react'
-import { cn } from '@/lib/utils'
-import { Loader2 } from 'lucide-react'
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";

-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline' | 'default'
-  size?: 'default' | 'sm' | 'lg' | 'icon'
-  isLoading?: boolean
-  children: React.ReactNode
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:shadow",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  isLoading?: boolean;
 }

-export function Button({
-  variant = 'primary',
-  size = 'default',
-  isLoading = false,
-  children,
-  className = '',
-  disabled,
-  ...props
-}: ButtonProps) {
-  const baseClasses = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
-
-  const variantClasses = {
-    primary: 'bg-blue-600 text-white hover:bg-blue-700 shadow hover:bg-blue-700/90',
-    default: 'bg-blue-600 text-white hover:bg-blue-700 shadow hover:bg-blue-700/90',
-    secondary: 'bg-slate-100 text-slate-900 hover:bg-slate-200/80',
-    ghost: 'hover:bg-slate-100 hover:text-slate-900',
-    destructive: 'bg-red-500 text-white hover:bg-red-600/90',
-    outline: 'border border-input bg-transparent shadow-sm hover:bg-slate-100 hover:text-slate-900'
-  }
-
-  const sizeClasses = {
-    default: 'h-9 px-4 py-2',
-    sm: 'h-8 rounded-md px-3 text-xs',
-    lg: 'h-10 rounded-md px-8',
-    icon: 'h-9 w-9'
-  }
-
-  return (
-    <button
-      className={cn(baseClasses, variantClasses[variant], sizeClasses[size], className)}
-      disabled={disabled || isLoading}
-      {...props}
-    >
-      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-      {children}
-    </button>
-  )
-}
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { className, variant, size, isLoading, children, disabled, ...props },
+    ref,
+  ) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        disabled={disabled || isLoading}
+        {...props}
+      >
+        {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+        {children}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface LabelProps
+  extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Label.displayName = "Label";
+
+export { Label };
@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
@@ -0,0 +1,57 @@
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  className?: string;
+}
+
+export function Skeleton({ className }: SkeletonProps) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-md bg-slate-200 dark:bg-slate-700",
+        className,
+      )}
+    />
+  );
+}
+
+export function StatsCardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+      <div className="flex items-center gap-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <div className="flex-1 space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-8 w-16" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function TableSkeleton({ rows = 5 }: { rows?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex gap-4">
+          <Skeleton className="h-12 flex-1" />
+          <Skeleton className="h-12 w-32" />
+          <Skeleton className="h-12 w-24" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-slate-100 p-6 space-y-4">
+      <Skeleton className="h-6 w-40" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-5/6" />
+      </div>
+    </div>
+  );
+}
@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useUser } from "@clerk/nextjs";
 import {
  Dialog,
  DialogContent,
@@ -26,6 +27,9 @@ import {
  type InvitationOptionsData,
 } from "@/lib/validation/user-schemas";
 import { ChevronLeft, ChevronRight, Check } from "lucide-react";
+import { useGyms } from "@/hooks/use-api";
+import { getInvitableRoles } from "@/lib/auth/permissions";
+import type { UserRole } from "@fitai/shared";

 interface CreateUserModalProps {
  open: boolean;
@@ -45,6 +49,15 @@ export function CreateUserModal({
  const [basicInfo, setBasicInfo] = useState<BasicInfoData | null>(null);
  const [clientInfo, setClientInfo] = useState<ClientInfoData | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { data: gyms = [] } = useGyms();
+  const { user } = useUser();
+
+  // Get current user's role and gym from Clerk metadata
+  const currentUserRole = (user?.publicMetadata?.role as UserRole) || "client";
+  const currentUserGymId = user?.publicMetadata?.gymId as string | null;
+
+  // Determine which roles the current user can create
+  const invitableRoles = getInvitableRoles(currentUserRole);

  // Step 1: Role Selection Form
  const roleForm = useForm<RoleSelectionData>({
@@ -136,10 +149,18 @@ export function CreateUserModal({
        invitationData,
      );

+      // Auto-assign gym for non-superAdmins
+      // SuperAdmins can select gym manually, others use their own gym
+      const finalPayload = {
+        ...payload,
+        gymId:
+          currentUserRole === "superAdmin" ? payload.gymId : currentUserGymId,
+      };
+
      const response = await fetch("/api/users/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(payload),
+        body: JSON.stringify(finalPayload),
      });

      if (!response.ok) {
@@ -153,6 +174,10 @@ export function CreateUserModal({

      // Reset form
      resetModal();
+
+      // Add delay to allow Clerk API to propagate invitation
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
      onSuccess();
      onOpenChange(false);
    } catch (error) {
@@ -259,7 +284,7 @@ export function CreateUserModal({
            <div className="space-y-2">
              <label className="text-sm font-medium">Role *</label>
              <div className="grid grid-cols-3 gap-3">
-                {(["admin", "trainer", "client"] as const).map((role) => (
+                {invitableRoles.map((role) => (
                  <label
                    key={role}
                    className={`flex items-center justify-center p-4 border-2 rounded-lg cursor-pointer transition-colors ${
@@ -461,6 +486,39 @@ export function CreateUserModal({
                </p>
              </div>
            )}
+
+            {/* Gym Selector - Only for SuperAdmins */}
+            {currentUserRole === "superAdmin" && (
+              <div className="space-y-2">
+                <label className="text-sm font-medium">
+                  Assign to Gym (Optional)
+                </label>
+                <select
+                  {...invitationForm.register("gymId")}
+                  className="w-full p-2 border border-gray-300 rounded-md"
+                >
+                  <option value="">Select a gym...</option>
+                  {gyms.map((gym) => (
+                    <option key={gym.id} value={gym.id}>
+                      {gym.name}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-gray-500">
+                  If not selected, user will not be assigned to any gym
+                </p>
+              </div>
+            )}
+
+            {/* Info message for non-superAdmins */}
+            {currentUserRole !== "superAdmin" && currentUserGymId && (
+              <div className="p-4 bg-gray-50 border border-gray-200 rounded-md">
+                <p className="text-sm text-gray-700">
+                  User will be automatically assigned to your gym
+                </p>
+              </div>
+            )}
+
            <DialogFooter className="flex justify-between">
              <Button type="button" variant="outline" onClick={handleBack}>
                <ChevronLeft className="mr-2 h-4 w-4" /> Back
@@ -0,0 +1,140 @@
+"use client";
+
+import { useState } from "react";
+import { formatDistanceToNow } from "date-fns";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { toast } from "@/lib/toast";
+import {
+  useRevokeInvitation,
+  useResendInvitation,
+  type Invitation,
+} from "@/hooks/use-api";
+import { Copy, RefreshCw, Trash2 } from "lucide-react";
+
+interface InvitationsGridProps {
+  invitations: Invitation[];
+  onRefetch: () => void;
+}
+
+export function InvitationsGrid({
+  invitations,
+  onRefetch,
+}: InvitationsGridProps) {
+  const revokeInvitation = useRevokeInvitation();
+  const resendInvitation = useResendInvitation();
+  const [actioningId, setActioningId] = useState<string | null>(null);
+
+  const handleCopyUrl = async (url: string) => {
+    try {
+      await navigator.clipboard.writeText(url);
+      toast.success("Invitation link copied to clipboard");
+    } catch (error) {
+      toast.error("Failed to copy link");
+    }
+  };
+
+  const handleRevoke = async (invitation: Invitation) => {
+    if (!confirm(`Cancel invitation for ${invitation.emailAddress}?`)) {
+      return;
+    }
+
+    setActioningId(invitation.id);
+    try {
+      await revokeInvitation.mutateAsync(invitation.id);
+      toast.success("Invitation cancelled");
+      onRefetch();
+    } catch (error) {
+      toast.error("Failed to cancel invitation");
+    } finally {
+      setActioningId(null);
+    }
+  };
+
+  const handleResend = async (invitation: Invitation) => {
+    setActioningId(invitation.id);
+    try {
+      await resendInvitation.mutateAsync(invitation.id);
+      toast.success("Invitation resent");
+      onRefetch();
+    } catch (error) {
+      toast.error("Failed to resend invitation");
+    } finally {
+      setActioningId(null);
+    }
+  };
+
+  if (invitations.length === 0) {
+    return (
+      <Card className="p-8 text-center text-muted-foreground">
+        No pending invitations
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {invitations.map((invitation) => {
+        const role = invitation.publicMetadata?.role || "unknown";
+        const createdDate = new Date(invitation.createdAt);
+        const isActioning = actioningId === invitation.id;
+
+        return (
+          <Card key={invitation.id} className="p-4">
+            <div className="flex items-center justify-between">
+              <div className="flex-1">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-medium">{invitation.emailAddress}</h3>
+                  <span className="text-xs px-2 py-1 rounded bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
+                    Pending
+                  </span>
+                  <span className="text-xs px-2 py-1 rounded bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                    {role}
+                  </span>
+                </div>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Sent {formatDistanceToNow(createdDate, { addSuffix: true })}
+                </p>
+              </div>
+
+              <div className="flex items-center gap-2">
+                {invitation.url && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleCopyUrl(invitation.url!)}
+                  >
+                    <Copy className="h-4 w-4 mr-1" />
+                    Copy Link
+                  </Button>
+                )}
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleResend(invitation)}
+                  disabled={isActioning}
+                >
+                  <RefreshCw
+                    className={`h-4 w-4 mr-1 ${isActioning ? "animate-spin" : ""}`}
+                  />
+                  Resend
+                </Button>
+
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={() => handleRevoke(invitation)}
+                  disabled={isActioning}
+                >
+                  <Trash2 className="h-4 w-4 mr-1" />
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}
@@ -9,9 +9,10 @@ import { formatDate } from "@/lib/utils";

 ModuleRegistry.registerModules([AllCommunityModule]);

-function getTimeAgo(date: Date): string {
+function getTimeAgo(date: Date | string): string {
  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
+  const d = typeof date === "string" ? new Date(date) : date;
+  const diffMs = now.getTime() - d.getTime();
  const diffMins = Math.floor(diffMs / 60000);
  const diffHours = Math.floor(diffMins / 60);
  const diffDays = Math.floor(diffHours / 24);
@@ -22,7 +23,7 @@ function getTimeAgo(date: Date): string {
  return `${diffDays}d ago`;
 }

-interface User {
+export interface User {
  id: string;
  email: string;
  firstName: string;
@@ -31,15 +32,18 @@ interface User {
  phone?: string;
  gymId?: string;
  gymName?: string | null;
-  createdAt: Date;
+  createdAt?: string | Date;
  isCheckedIn?: boolean;
-  checkInTime?: Date;
+  checkInTime?: string | Date;
+  lastCheckInTime?: string | Date;
+  checkInsThisWeek?: number;
+  checkInsThisMonth?: number;
  client?: {
    id: string;
    membershipType: string;
    membershipStatus: string;
-    joinDate: Date;
-    lastVisit?: Date;
+    joinDate: string | Date;
+    lastVisit?: string | Date;
  };
 }

@@ -256,7 +260,7 @@ export function UserGrid({
      // },
      {
        headerName: "Last Visit",
-        valueGetter: (params) => params.data?.client?.lastVisit,
+        valueGetter: (params) => params.data?.lastCheckInTime,
        filter: "agDateColumnFilter",
        sortable: true,
        valueFormatter: (params: any) =>
@@ -1,44 +1,33 @@
 "use client";

-import { useState, useEffect } from "react";
-import { UserGrid } from "@/components/users/UserGrid";
-// import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import { UserGrid, type User } from "@/components/users/UserGrid";
+import { InvitationsGrid } from "@/components/users/InvitationsGrid";
 import { Card, CardHeader, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { useUser } from "@clerk/nextjs";
-import { getGymIdFromUser } from "@/lib/error-helpers";
 import log from "@/lib/logger";
 import { toast } from "@/lib/toast";
 import { CreateUserModal } from "./CreateUserModal";
+import {
+  useUsers,
+  useGyms,
+  useUpdateUser,
+  useDeleteUser,
+  useSendInvitation,
+  useInvitations,
+} from "@/hooks/use-api";

-interface User {
-  id: string;
-  email: string;
-  firstName: string;
-  lastName: string;
-  role: string;
-  phone?: string;
+interface UserManagementProps {
  gymId?: string;
-  createdAt: Date;
-  isCheckedIn?: boolean;
-  checkInTime?: Date;
-  lastCheckInTime?: Date;
-  checkInsThisWeek?: number;
-  checkInsThisMonth?: number;
-  client?: {
-    id: string;
-    membershipType: string;
-    membershipStatus: string;
-    joinDate: Date;
-    lastVisit?: Date;
-  };
 }

-export function UserManagement() {
+export function UserManagement({ gymId }: UserManagementProps) {
  const { user } = useUser();
-  const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState<string>("all");
+  const [viewFilter, setViewFilter] = useState<"all" | "active" | "pending">(
+    "all",
+  );
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const [isEditing, setIsEditing] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
@@ -50,70 +39,33 @@ export function UserManagement() {
    role: string;
    phone: string;
    gymId: string;
+    membershipType?: string;
+    membershipStatus?: string;
  } | null>(null);

-  // Active gyms for dropdown
-  const [gyms, setGyms] = useState<Array<{ id: string; name: string }>>([]);
+  const {
+    data: users = [],
+    isLoading: usersLoading,
+    refetch: refetchUsers,
+  } = useUsers({
+    role: filter !== "all" ? filter : undefined,
+    gymId,
+  });

-  // Load gyms when modal opens or refreshes
-  useEffect(() => {
-    if (isEditing) {
-      (async () => {
-        try {
-          const res = await fetch("/api/gyms");
-          const data = await res.json();
-          if (Array.isArray(data)) {
-            // map down to id and name to avoid extra payload use here
-            setGyms(data.map((g: any) => ({ id: g.id, name: g.name })));
-          } else {
-            setGyms([]);
-          }
-        } catch {
-          setGyms([]);
-        }
-      })();
-    }
-  }, [isEditing]);
+  const {
+    data: invitations = [],
+    isLoading: invitationsLoading,
+    refetch: refetchInvitations,
+  } = useInvitations(gymId);

-  useEffect(() => {
-    fetchUsers();
-  }, [filter]);
+  const { data: gyms = [] } = useGyms();
+  const updateUser = useUpdateUser();
+  const deleteUser = useDeleteUser();
+  const sendInvitation = useSendInvitation();

-  const fetchUsers = async () => {
-    setLoading(true);
-    try {
-      const ts = Date.now();
-      const url =
-        filter === "all"
-          ? `/api/users?ts=${ts}`
-          : `/api/users?role=${filter}&ts=${ts}`;
-
-      log.debug("Fetching users", { url });
-      const response = await fetch(url, { cache: "no-store" });
-      log.debug("Users fetch response", {
-        ok: response.ok,
-        status: response.status,
-      });
-      const responseData = await response.json();
-      const data = responseData.data || responseData; // Handle both old and new API response formats
-      log.debug("Received users data", {
-        count: Array.isArray(data.users) ? data.users.length : 0,
-        sample:
-          data.users && data.users[0]
-            ? {
-                id: data.users[0].id,
-                gymId: data.users[0].gymId,
-                role: data.users[0].role,
-              }
-            : null,
-      });
-      setUsers(data.users || []);
-    } catch (error) {
-      log.error("Failed to fetch users", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const isLoading =
+    viewFilter === "pending" ? invitationsLoading : usersLoading;
+  const refetch = viewFilter === "pending" ? refetchInvitations : refetchUsers;

  const handleUserSelect = (user: User | null) => {
    setSelectedUser(user);
@@ -128,6 +80,8 @@ export function UserManagement() {
      role: user.role,
      phone: user.phone || "",
      gymId: user.gymId || "",
+      membershipType: user.client?.membershipType || "basic",
+      membershipStatus: user.client?.membershipStatus || "active",
    });
    setIsEditing(true);
  };
@@ -144,17 +98,12 @@ export function UserManagement() {
      return;

    try {
-      const response = await fetch("/api/users", {
-        method: "DELETE",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ ids: users.map((u) => u.id) }),
-      });
-      if (response.ok) {
-        fetchUsers();
-        toast.success("Users deleted successfully");
-      } else {
-        toast.error("Error deleting users");
-      }
+      const deletePromises = users.map((u) =>
+        fetch(`/api/users?id=${u.id}`, { method: "DELETE" }),
+      );
+      await Promise.all(deletePromises);
+      refetch();
+      toast.success("Users deleted successfully");
    } catch (error) {
      log.error("Failed to delete users", error);
    }
@@ -196,7 +145,7 @@ export function UserManagement() {
  };

  const handleRefresh = () => {
-    fetchUsers();
+    refetch();
  };

  const handleSaveEdit = async () => {
@@ -204,8 +153,7 @@ export function UserManagement() {

    try {
      if (selectedUser) {
-        // Update existing user
-        const payload = {
+        const payload: any = {
          id: selectedUser.id,
          email: editForm.email,
          firstName: editForm.firstName,
@@ -214,80 +162,27 @@ export function UserManagement() {
          phone: editForm.phone,
          gymId: editForm.gymId === "" ? null : editForm.gymId,
        };
-        log.debug("Updating user", payload);
-        const response = await fetch("/api/users", {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(payload),
-        });
-        log.debug("User update response", {
-          ok: response.ok,
-          status: response.status,
-        });
-        if (response.ok) {
-          // Optimistically update local state so grid reflects changes immediately
-          setUsers((prev) =>
-            prev.map((u) =>
-              u.id === selectedUser.id
-                ? {
-                    ...u,
-                    email: editForm.email,
-                    firstName: editForm.firstName,
-                    lastName: editForm.lastName,
-                    role: editForm.role,
-                    phone: editForm.phone || undefined,
-                    gymId: editForm.gymId === "" ? undefined : editForm.gymId,
-                  }
-                : u,
-            ),
-          );
-          setSelectedUser((prev) =>
-            prev
-              ? {
-                  ...prev,
-                  email: editForm.email,
-                  firstName: editForm.firstName,
-                  lastName: editForm.lastName,
-                  role: editForm.role,
-                  phone: editForm.phone || undefined,
-                  gymId: editForm.gymId === "" ? undefined : editForm.gymId,
-                }
-              : prev,
-          );
-          setIsEditing(false);
-          setEditForm(null);
-          // Still re-fetch from server to ensure consistency
-          log.debug("Re-fetching users after successful edit");
-          fetchUsers();
-          toast.success("User updated successfully");
-        } else {
-          const errText = await response.text().catch(() => "");
-          log.error("User update failed", new Error(errText), {
-            status: response.status,
-          });
-          toast.error("Error updating user");
-        }
-      } else {
-        // Create (Invite) new user
-        const response = await fetch("/api/invitations", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            inviteeEmail: editForm.email,
-            roleAssigned: editForm.role,
-            gymId: editForm.gymId || undefined,
-          }),
-        });

-        if (response.ok) {
-          setIsEditing(false);
-          setEditForm(null);
-          fetchUsers();
-          toast.success("Invitation sent successfully!");
-        } else {
-          const errorData = await response.json();
-          toast.error(`Error sending invitation: ${errorData.error}`);
+        // Include membership fields if user is a client
+        if (editForm.role === "client") {
+          payload.membershipType = editForm.membershipType;
+          payload.membershipStatus = editForm.membershipStatus;
        }
+
+        await updateUser.mutateAsync(payload);
+        setIsEditing(false);
+        setEditForm(null);
+        refetch();
+        toast.success("User updated successfully");
+      } else {
+        await sendInvitation.mutateAsync({
+          email: editForm.email,
+          role: editForm.role,
+        });
+        setIsEditing(false);
+        setEditForm(null);
+        refetch();
+        toast.success("Invitation sent successfully!");
      }
    } catch (error) {
      console.error(error);
@@ -299,17 +194,11 @@ export function UserManagement() {
    if (!selectedUser) return;

    try {
-      const response = await fetch(`/api/users?id=${selectedUser.id}`, {
-        method: "DELETE",
-      });
-      if (response.ok) {
-        setIsDeleting(false);
-        setSelectedUser(null);
-        fetchUsers();
-        toast.success("User deleted successfully");
-      } else {
-        toast.error("Error deleting user");
-      }
+      await deleteUser.mutateAsync(selectedUser.id);
+      setIsDeleting(false);
+      setSelectedUser(null);
+      refetch();
+      toast.success("User deleted successfully");
    } catch (error) {
      log.error("Failed to delete user", error);
    }
@@ -320,6 +209,19 @@ export function UserManagement() {
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">User Management</h2>
        <div className="flex gap-2">
+          {/* View Filter: All/Active/Pending */}
+          <select
+            value={viewFilter}
+            onChange={(e) =>
+              setViewFilter(e.target.value as "all" | "active" | "pending")
+            }
+            className="px-3 py-2 border rounded-md bg-white dark:bg-gray-800"
+          >
+            <option value="all">All Users</option>
+            <option value="active">Active Users</option>
+            <option value="pending">Pending Invitations</option>
+          </select>
+
          <Button
            variant={filter === "all" ? "default" : "outline"}
            onClick={() => setFilter("all")}
@@ -347,7 +249,7 @@ export function UserManagement() {
            variant={filter === "client" ? "default" : "outline"}
            onClick={() => setFilter("client")}
          >
-            Clientsa
+            Clients
          </Button>
          <Button
            variant={filter === "trainer" ? "default" : "outline"}
@@ -372,33 +274,48 @@ export function UserManagement() {

      <div className="flex justify-between items-center">
        <div className="text-sm text-gray-600">
-          Showing {users.length} users
-          {selectedUser && (
-            <span className="ml-4 text-blue-600">
-              Selected: {selectedUser.firstName} {selectedUser.lastName}
-            </span>
+          {viewFilter === "pending" ? (
+            <>Showing {invitations.length} pending invitations</>
+          ) : (
+            <>
+              Showing {users.length} users
+              {selectedUser && (
+                <span className="ml-4 text-blue-600">
+                  Selected: {selectedUser.firstName} {selectedUser.lastName}
+                </span>
+              )}
+            </>
          )}
        </div>
        <div className="flex gap-2">
          <Button variant="default" onClick={handleRefresh}>
            Refresh
          </Button>
-          <Button variant="default" onClick={handleExport}>
-            Export CSV
-          </Button>
+          {viewFilter !== "pending" && (
+            <Button variant="default" onClick={handleExport}>
+              Export CSV
+            </Button>
+          )}
        </div>
      </div>

      <Card>
        <CardContent className="p-0">
-          <UserGrid
-            users={users}
-            onUserSelect={(user) => handleUserSelect(user)}
-            onEditUser={handleEditUser}
-            onDeleteUser={handleDeleteUser}
-            onBulkDelete={handleBulkDelete}
-            loading={loading}
-          />
+          {viewFilter === "pending" ? (
+            <InvitationsGrid
+              invitations={invitations}
+              onRefetch={refetchInvitations}
+            />
+          ) : (
+            <UserGrid
+              users={users}
+              onUserSelect={(user) => handleUserSelect(user)}
+              onEditUser={handleEditUser}
+              onDeleteUser={handleDeleteUser}
+              onBulkDelete={handleBulkDelete}
+              loading={isLoading}
+            />
+          )}
        </CardContent>
      </Card>

@@ -488,26 +405,78 @@ export function UserManagement() {
                  className="w-full border border-gray-300 rounded px-3 py-2"
                />
              </div>
-              <div className="mb-4">
-                <label className="block text-sm font-medium mb-1">Gym</label>
-                <select
-                  value={editForm.gymId}
-                  onChange={(e) =>
-                    setEditForm({ ...editForm, gymId: e.target.value })
-                  }
-                  className="w-full border border-gray-300 rounded px-3 py-2"
-                >
-                  <option value="">Proceed without gym</option>
-                  {gyms.map((g) => (
-                    <option key={g.id} value={g.id}>
-                      {g.name}
-                    </option>
-                  ))}
-                </select>
-                <p className="text-xs text-gray-500 mt-1">
-                  Select an active gym or proceed without a gym.
-                </p>
-              </div>
+
+              {/* Only superAdmins can reassign gyms */}
+              {(() => {
+                const currentRole = user?.publicMetadata?.role;
+                console.log("Current user role for gym selector:", currentRole);
+                return currentRole === "superAdmin";
+              })() && (
+                <div className="mb-4">
+                  <label className="block text-sm font-medium mb-1">Gym</label>
+                  <select
+                    value={editForm.gymId}
+                    onChange={(e) =>
+                      setEditForm({ ...editForm, gymId: e.target.value })
+                    }
+                    className="w-full border border-gray-300 rounded px-3 py-2"
+                  >
+                    <option value="">Proceed without gym</option>
+                    {gyms.map((g) => (
+                      <option key={g.id} value={g.id}>
+                        {g.name}
+                      </option>
+                    ))}
+                  </select>
+                  <p className="text-xs text-gray-500 mt-1">
+                    Select an active gym or proceed without a gym.
+                  </p>
+                </div>
+              )}
+
+              {/* Client-specific fields - only show when role is client */}
+              {editForm.role === "client" && (
+                <>
+                  <div className="mb-4">
+                    <label className="block text-sm font-medium mb-1">
+                      Membership Type
+                    </label>
+                    <select
+                      value={editForm.membershipType || "basic"}
+                      onChange={(e) =>
+                        setEditForm({
+                          ...editForm,
+                          membershipType: e.target.value,
+                        })
+                      }
+                      className="w-full border border-gray-300 rounded px-3 py-2"
+                    >
+                      <option value="basic">Basic</option>
+                      <option value="premium">Premium</option>
+                      <option value="vip">VIP</option>
+                    </select>
+                  </div>
+                  <div className="mb-4">
+                    <label className="block text-sm font-medium mb-1">
+                      Membership Status
+                    </label>
+                    <select
+                      value={editForm.membershipStatus || "active"}
+                      onChange={(e) =>
+                        setEditForm({
+                          ...editForm,
+                          membershipStatus: e.target.value,
+                        })
+                      }
+                      className="w-full border border-gray-300 rounded px-3 py-2"
+                    >
+                      <option value="active">Active</option>
+                      <option value="inactive">Inactive</option>
+                      <option value="suspended">Suspended</option>
+                    </select>
+                  </div>
+                </>
+              )}
              <div className="flex justify-end gap-2">
                <button
                  type="button"
@@ -591,7 +560,9 @@ export function UserManagement() {
                  </p>
                  <p>
                    <span className="font-medium">Joined:</span>{" "}
-                    {new Date(selectedUser.createdAt).toLocaleDateString()}
+                    {selectedUser.createdAt
+                      ? new Date(selectedUser.createdAt).toLocaleDateString()
+                      : "N/A"}
                  </p>
                </div>
              </div>
@@ -616,9 +587,9 @@ export function UserManagement() {
                    </p>
                    <p>
                      <span className="font-medium">Last Visit:</span>{" "}
-                      {selectedUser.client.lastVisit
+                      {selectedUser.lastCheckInTime
                        ? new Date(
-                            selectedUser.client.lastVisit,
+                            selectedUser.lastCheckInTime,
                          ).toLocaleDateString()
                        : "Never"}
                    </p>
@@ -653,7 +624,10 @@ export function UserManagement() {
      <CreateUserModal
        open={createModalOpen}
        onOpenChange={setCreateModalOpen}
-        onSuccess={() => fetchUsers()}
+        onSuccess={() => {
+          refetchUsers();
+          refetchInvitations();
+        }}
      />
    </div>
  );
@@ -0,0 +1,452 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+
+export interface DashboardStats {
+  totalUsers: number;
+  activeClients: number;
+  totalRevenue: number;
+  revenueGrowth: number;
+}
+
+export interface User {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  phone?: string;
+  gymId?: string;
+  gymName?: string | null;
+  createdAt?: string;
+  isCheckedIn?: boolean;
+  checkInTime?: string;
+  lastCheckInTime?: string;
+  checkInsThisWeek?: number;
+  checkInsThisMonth?: number;
+  client?: {
+    id: string;
+    membershipType: string;
+    membershipStatus: string;
+    joinDate: string;
+    lastVisit?: string;
+  };
+}
+
+export interface Recommendation {
+  id: string;
+  userId: string;
+  type: string;
+  title: string;
+  description: string;
+  content?: string;
+  recommendationText?: string;
+  activityPlan?: string;
+  dietPlan?: string;
+  status: "pending" | "approved" | "rejected";
+  createdAt: string;
+  user?: User;
+}
+
+export interface Gym {
+  id: string;
+  name: string;
+  address?: string;
+}
+
+export interface AttendanceRecord {
+  id: string;
+  userId: string;
+  userName?: string;
+  userEmail?: string;
+  checkInTime: Date;
+  checkOutTime?: Date;
+  date: string;
+  type?: string;
+}
+
+export interface Invitation {
+  id: string;
+  emailAddress: string;
+  publicMetadata: {
+    role?: string;
+    gymId?: string;
+    createdBy?: string;
+  } | null;
+  status: "pending" | "accepted" | "revoked" | "expired";
+  url?: string;
+  createdAt: number;
+  updatedAt: number;
+  revoked?: boolean;
+}
+
+async function fetchApi<T>(url: string, options?: RequestInit): Promise<T> {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      "Content-Type": "application/json",
+      ...options?.headers,
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response
+      .json()
+      .catch(() => ({ error: "Request failed" }));
+    throw new Error(error.error || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export function useDashboardStats(gymId?: string) {
+  return useQuery({
+    queryKey: ["dashboard-stats", gymId],
+    queryFn: () => {
+      const url = gymId
+        ? `/api/admin/stats?gymId=${gymId}`
+        : "/api/admin/stats";
+      return fetchApi<{ data: { stats: DashboardStats } }>(url).then(
+        (res) => res.data?.stats,
+      );
+    },
+  });
+}
+
+export function useUsers(filters?: {
+  role?: string;
+  gymId?: string;
+  search?: string;
+}) {
+  const params = new URLSearchParams();
+  if (filters?.role) params.set("role", filters.role);
+  if (filters?.gymId) params.set("gymId", filters.gymId);
+  if (filters?.search) params.set("search", filters.search);
+
+  const queryString = params.toString();
+  const url = queryString ? `/api/users?${queryString}` : "/api/users";
+
+  return useQuery({
+    queryKey: ["users", filters],
+    queryFn: () =>
+      fetchApi<{ data: { users: User[] } }>(url).then(
+        (res) => res.data?.users ?? [],
+      ),
+  });
+}
+
+export function useUser(userId: string) {
+  return useQuery({
+    queryKey: ["user", userId],
+    queryFn: () =>
+      fetchApi<{ data: { user: User } }>(`/api/users?id=${userId}`).then(
+        (res) => res.data?.user,
+      ),
+    enabled: !!userId,
+  });
+}
+
+export function useRecommendations(filters?: {
+  userId?: string;
+  status?: string;
+}) {
+  const params = new URLSearchParams();
+  if (filters?.userId) params.set("userId", filters.userId);
+  if (filters?.status) params.set("status", filters.status);
+
+  const queryString = params.toString();
+  const url = queryString
+    ? `/api/recommendations?${queryString}`
+    : "/api/recommendations";
+
+  return useQuery({
+    queryKey: ["recommendations", filters],
+    queryFn: () =>
+      fetchApi<{ data: { recommendations: Recommendation[] } }>(url).then(
+        (res) => res.data?.recommendations ?? [],
+      ),
+  });
+}
+
+export function usePendingRecommendationsCount() {
+  return useQuery({
+    queryKey: ["pending-recommendations-count"],
+    queryFn: () =>
+      fetchApi<{ data: { recommendations: Recommendation[] } }>(
+        "/api/recommendations",
+      ).then(
+        (res) =>
+          (res.data?.recommendations ?? []).filter(
+            (r) => r.status === "pending",
+          ).length,
+      ),
+    refetchInterval: 30000,
+  });
+}
+
+export function useGyms() {
+  return useQuery({
+    queryKey: ["gyms"],
+    queryFn: () =>
+      fetchApi<{ data: { gyms: Gym[] } }>("/api/gyms").then(
+        (res) => res.data?.gyms ?? (Array.isArray(res) ? res : []),
+      ),
+  });
+}
+
+export function useAttendance(filters?: { userId?: string; date?: string }) {
+  const params = new URLSearchParams();
+  if (filters?.userId) params.set("userId", filters.userId);
+  if (filters?.date) params.set("date", filters.date);
+
+  const queryString = params.toString();
+  const url = queryString
+    ? `/api/admin/attendance?${queryString}`
+    : "/api/admin/attendance";
+
+  return useQuery({
+    queryKey: ["attendance", filters],
+    queryFn: () =>
+      fetchApi<{ data: { records: AttendanceRecord[] } }>(url).then(
+        (res) => res.data?.records ?? [],
+      ),
+  });
+}
+
+export function useCreateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: {
+      email: string;
+      firstName: string;
+      lastName: string;
+      role: string;
+      phone?: string;
+      gymId?: string;
+    }) =>
+      fetchApi<{ data: { userId: string } }>("/api/users/create", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }).then((res) => res.data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    },
+  });
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { id: string; [key: string]: unknown }) =>
+      fetchApi<{ data: { success: boolean } }>(`/api/users?id=${data.id}`, {
+        method: "PUT",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["user", variables.id] });
+    },
+  });
+}
+
+export function useDeleteUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean } }>(`/api/users?id=${userId}`, {
+        method: "DELETE",
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: ["dashboard-stats"] });
+    },
+  });
+}
+
+export function useGenerateRecommendations() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId?: string) =>
+      fetchApi<{
+        data: { success: boolean; recommendations?: Recommendation[] };
+      }>("/api/recommendations/generate", {
+        method: "POST",
+        body: userId ? JSON.stringify({ userId }) : undefined,
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+      queryClient.invalidateQueries({
+        queryKey: ["pending-recommendations-count"],
+      });
+    },
+  });
+}
+
+export function useApproveRecommendation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { recommendationId: string; approved: boolean }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/recommendations/approve", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+      queryClient.invalidateQueries({
+        queryKey: ["pending-recommendations-count"],
+      });
+    },
+  });
+}
+
+export function useUpdateRecommendation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: {
+      id: string;
+      content?: string;
+      activityPlan?: string;
+      dietPlan?: string;
+    }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/recommendations", {
+        method: "PUT",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["recommendations"] });
+    },
+  });
+}
+
+export function useCheckIn() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean; record: AttendanceRecord } }>(
+        "/api/attendance/check-in",
+        {
+          method: "POST",
+          body: JSON.stringify({ userId }),
+        },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["attendance"] });
+    },
+  });
+}
+
+export function useCheckOut() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (userId: string) =>
+      fetchApi<{ data: { success: boolean } }>("/api/attendance/check-out", {
+        method: "POST",
+        body: JSON.stringify({ userId }),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["attendance"] });
+    },
+  });
+}
+
+export function useInvitations(gymId?: string) {
+  return useQuery({
+    queryKey: ["invitations", gymId],
+    queryFn: () => {
+      const url = gymId
+        ? `/api/invitations?gymId=${gymId}`
+        : "/api/invitations";
+      return fetchApi<{ data: { invitations: Invitation[] } }>(url).then(
+        (res) => res.data?.invitations ?? [],
+      );
+    },
+    refetchInterval: (query) => {
+      const data = query.state.data;
+      const hasData = data && data.length > 0;
+      const fetchCount = query.state.dataUpdateCount;
+
+      // Poll every 2 seconds if:
+      // 1. No invitations returned yet
+      // 2. Haven't exceeded 5 attempts (10 seconds total)
+      if (!hasData && fetchCount < 5) {
+        return 2000;
+      }
+
+      // Stop polling after 10 seconds or when data is present
+      return false;
+    },
+  });
+}
+
+export function useSendInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: { email: string; role: string }) =>
+      fetchApi<{ data: { success: boolean } }>("/api/invitations", {
+        method: "POST",
+        body: JSON.stringify(data),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invitations"] });
+    },
+  });
+}
+
+export function useRevokeInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (invitationId: string) =>
+      fetchApi<{ data: { success: boolean } }>(
+        `/api/invitations/${invitationId}`,
+        { method: "DELETE" },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invitations"] });
+      queryClient.invalidateQueries({ queryKey: ["users"] });
+    },
+  });
+}
+
+export function useResendInvitation() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (invitationId: string) =>
+      fetchApi<{ data: { invitation: any } }>(
+        `/api/invitations/${invitationId}/resend`,
+        { method: "POST" },
+      ),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["invitations"] });
+    },
+  });
+}
+
+export interface AnalyticsData {
+  userGrowth: { label: string; value: number }[];
+  membershipDistribution: { label: string; value: number; color: string }[];
+  revenue: { label: string; value: number; color: string }[];
+}
+
+export function useAnalytics(months: number = 6, gymId?: string) {
+  return useQuery({
+    queryKey: ["analytics", months, gymId],
+    queryFn: () => {
+      const url = gymId
+        ? `/api/admin/analytics?months=${months}&gymId=${gymId}`
+        : `/api/admin/analytics?months=${months}`;
+      return fetchApi<{ data: { analytics: AnalyticsData } }>(url).then(
+        (res) => res.data?.analytics,
+      );
+    },
+  });
+}
@@ -0,0 +1,274 @@
+import { NextRequest, NextResponse } from "next/server";
+import { auth } from "@clerk/nextjs/server";
+import { USER_ROLES, type UserRole } from "@fitai/shared";
+import { getDatabase } from "../database";
+
+export interface AuthContext {
+  userId: string;
+  role: UserRole;
+  gymId: string | null;
+}
+
+export interface AuthResult extends AuthContext {}
+
+/**
+ * Get the full authentication context including gymId
+ * Combines Clerk session claims with database lookup for accurate gym assignment
+ *
+ * @returns AuthContext with userId, role, and gymId
+ *
+ * @example
+ * const { userId, role, gymId } = await getAuthContext();
+ * // userId: "user_abc123"
+ * // role: "admin"
+ * // gymId: "gym_xyz"
+ */
+export async function getAuthContext(): Promise<AuthContext> {
+  const { userId, sessionClaims } = await auth();
+
+  if (!userId) {
+    throw new Error("Unauthorized: No authenticated user");
+  }
+
+  // Try to get role from Clerk metadata (could be in publicMetadata or metadata)
+  let role = (sessionClaims?.publicMetadata as { role?: UserRole })?.role;
+
+  // Fallback: Try the metadata field if publicMetadata doesn't have it
+  if (!role) {
+    role = (sessionClaims?.metadata as { role?: UserRole })?.role;
+  }
+
+  // If still no role, try database lookup as last resort
+  if (!role || !USER_ROLES.includes(role)) {
+    console.log("Role not found in session claims, fetching from database", {
+      userId,
+      roleFromPublicMetadata: (
+        sessionClaims?.publicMetadata as { role?: UserRole }
+      )?.role,
+      roleFromMetadata: (sessionClaims?.metadata as { role?: UserRole })?.role,
+    });
+
+    try {
+      const db = await getDatabase();
+      const user = await db.getUserById(userId);
+
+      if (!user) {
+        console.error("User not found in database", { userId });
+        throw new Error(`Forbidden: User not found in database - ${userId}`);
+      }
+
+      if (user.role && USER_ROLES.includes(user.role as UserRole)) {
+        console.log("Role found in database", { userId, role: user.role });
+        role = user.role as UserRole;
+      } else {
+        console.error("Invalid role in database", { userId, role: user.role });
+        throw new Error(`Forbidden: Invalid role in database - ${user.role}`);
+      }
+    } catch (error) {
+      console.error("Failed to get role from database:", error);
+      throw new Error(
+        `Forbidden: Could not determine user role - ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+
+  // Get gymId from Clerk metadata or database
+  let gymId: string | null = null;
+
+  // First try Clerk publicMetadata (faster path)
+  const clerkGymId = (sessionClaims?.publicMetadata as { gymId?: string })
+    ?.gymId;
+  if (clerkGymId) {
+    gymId = clerkGymId;
+  } else {
+    // Try metadata field
+    const metadataGymId = (sessionClaims?.metadata as { gymId?: string })
+      ?.gymId;
+    if (metadataGymId) {
+      gymId = metadataGymId;
+    } else {
+      // Fallback to database lookup
+      try {
+        const db = await getDatabase();
+        const user = await db.getUserById(userId);
+        gymId = user?.gymId ?? null;
+      } catch (error) {
+        console.error("Failed to get gymId from database:", error);
+        gymId = null;
+      }
+    }
+  }
+
+  return { userId, role, gymId };
+}
+
+/**
+ * Middleware to require authentication and optionally check user role
+ * Enhanced version that also retrieves gymId
+ *
+ * @param allowedRoles - Array of roles allowed to access the endpoint (optional)
+ * @returns Authentication result with userId, role, and gymId, or NextResponse error
+ *
+ * @example
+ * export async function DELETE(request: NextRequest) {
+ *   const authResult = await requireAuth(["admin", "superAdmin"]);
+ *   if (authResult instanceof NextResponse) return authResult;
+ *   const { userId, role, gymId } = authResult;
+ *   // ... proceed with authorized logic
+ * }
+ */
+export async function requireAuth(
+  allowedRoles?: UserRole[],
+): Promise<AuthResult | NextResponse> {
+  try {
+    const context = await getAuthContext();
+
+    // Check if user has required role
+    if (allowedRoles && allowedRoles.length > 0) {
+      if (!allowedRoles.includes(context.role)) {
+        return NextResponse.json(
+          {
+            error: `Forbidden - Requires one of: ${allowedRoles.join(", ")}`,
+            requiredRoles: allowedRoles,
+            userRole: context.role,
+          },
+          { status: 403 },
+        );
+      }
+    }
+
+    return context;
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+
+    if (message.includes("Unauthorized")) {
+      return NextResponse.json(
+        { error: "Unauthorized - Authentication required" },
+        { status: 401 },
+      );
+    }
+
+    if (message.includes("Forbidden")) {
+      return NextResponse.json({ error: message }, { status: 403 });
+    }
+
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 },
+    );
+  }
+}
+
+/**
+ * Require authentication with gym access validation
+ * Use this for endpoints that need to verify the user can access a specific gym
+ *
+ * @param allowedRoles - Roles allowed to access this endpoint
+ * @param requiredGymId - Gym ID that must be accessed (optional - uses user's gym if not provided)
+ * @returns AuthResult with full context, or NextResponse error
+ *
+ * @example
+ * // Admin accessing their own gym
+ * const result = await requireGymAccess(["admin"]);
+ *
+ * // SuperAdmin accessing specific gym
+ * const result = await requireGymAccess(["superAdmin"], "gym_123");
+ */
+export async function requireGymAccess(
+  allowedRoles: UserRole[],
+  requiredGymId?: string,
+): Promise<AuthResult | NextResponse> {
+  const authResult = await requireAuth(allowedRoles);
+
+  if (authResult instanceof NextResponse) {
+    return authResult;
+  }
+
+  const { role, gymId: userGymId } = authResult;
+
+  // Determine target gym
+  const targetGymId = requiredGymId ?? userGymId;
+
+  // SuperAdmin can access any gym
+  if (role === "superAdmin") {
+    return { ...authResult, gymId: targetGymId };
+  }
+
+  // Other roles must have matching gym
+  if (!targetGymId) {
+    return NextResponse.json(
+      { error: "Forbidden - User is not assigned to a gym" },
+      { status: 403 },
+    );
+  }
+
+  if (userGymId !== targetGymId) {
+    return NextResponse.json(
+      { error: "Forbidden - Cannot access other gym's data" },
+      { status: 403 },
+    );
+  }
+
+  return { ...authResult, gymId: targetGymId };
+}
+
+/**
+ * Get the target gym ID from request for superAdmin context switching
+ * SuperAdmins can pass ?gymId to view specific gym data
+ *
+ * @param request - NextRequest with query params
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @returns Target gym ID or undefined for superAdmin viewing all
+ *
+ * @example
+ * const targetGymId = getTargetGymId(request, role, gymId);
+ * // For superAdmin with ?gymId=abc -> "abc"
+ * // For superAdmin without param -> undefined (all gyms)
+ * // For admin -> always returns their gymId
+ */
+export function getTargetGymId(
+  request: NextRequest,
+  userRole: UserRole,
+  userGymId: string | null,
+): string | undefined {
+  // For superAdmin, allow gymId query param for context switching
+  if (userRole === "superAdmin") {
+    const queryGymId = request.nextUrl.searchParams.get("gymId");
+    return queryGymId ?? undefined;
+  }
+
+  // For other roles, they can only access their own gym
+  return userGymId ?? undefined;
+}
+
+/**
+ * Check if the authenticated user is trying to modify their own account
+ * Useful for preventing self-deletion or self-demotion
+ */
+export function isSelfModification(
+  userId: string,
+  targetUserId: string,
+): boolean {
+  return userId === targetUserId;
+}
+
+/**
+ * Validate that an admin isn't demoting themselves or deleting their own account
+ */
+export function preventSelfModification(
+  userId: string,
+  targetUserId: string,
+  action: string,
+): NextResponse | undefined {
+  if (isSelfModification(userId, targetUserId)) {
+    return NextResponse.json(
+      {
+        error: `Cannot ${action} your own account`,
+        hint: "Ask another administrator to perform this action",
+      },
+      { status: 403 },
+    );
+  }
+  return undefined;
+}
@@ -0,0 +1,249 @@
+import type { UserRole } from "@fitai/shared";
+import { NextResponse } from "next/server";
+
+/**
+ * Check if a user can access data from a specific gym
+ *
+ * @param userRole - The role of the requesting user
+ * @param userGymId - The gym ID of the requesting user (null for superAdmin)
+ * @param targetGymId - The gym ID being accessed (undefined means all gyms)
+ * @returns true if access is allowed
+ *
+ * @example
+ * // SuperAdmin accessing any gym
+ * canAccessGym("superAdmin", null, "gym_123") // true
+ *
+ * // Admin accessing their own gym
+ * canAccessGym("admin", "gym_abc", "gym_abc") // true
+ *
+ * // Admin trying to access other gym
+ * canAccessGym("admin", "gym_abc", "gym_xyz") // false
+ */
+export function canAccessGym(
+  userRole: UserRole,
+  userGymId: string | null,
+  targetGymId: string | undefined,
+): boolean {
+  // SuperAdmin can access any gym
+  if (userRole === "superAdmin") {
+    return true;
+  }
+
+  // If no target gym specified, allow access to own gym
+  if (targetGymId === undefined) {
+    return true;
+  }
+
+  // Non-superAdmins must have a gymId
+  if (!userGymId) {
+    return false;
+  }
+
+  // Must match the gym
+  return userGymId === targetGymId;
+}
+
+/**
+ * Check if a user can manage (create/update/delete) another user
+ * Based on role hierarchy and gym membership
+ *
+ * @param requesterRole - Role of the user making the request
+ * @param requesterGymId - Gym ID of the requesting user
+ * @param targetRole - Role of the user being managed
+ * @param targetGymId - Gym ID of the user being managed
+ * @returns true if management is allowed
+ *
+ * @example
+ * // SuperAdmin can manage anyone
+ * canManageUser("superAdmin", null, "admin", "gym_abc") // true
+ *
+ * // Admin can manage trainers and clients in their gym
+ * canManageUser("admin", "gym_abc", "trainer", "gym_abc") // true
+ * canManageUser("admin", "gym_abc", "client", "gym_abc") // true
+ *
+ * // Admin cannot manage users in other gyms
+ * canManageUser("admin", "gym_abc", "trainer", "gym_xyz") // false
+ *
+ * // Trainer can manage clients in their gym
+ * canManageUser("trainer", "gym_abc", "client", "gym_abc") // true
+ */
+export function canManageUser(
+  requesterRole: UserRole,
+  requesterGymId: string | null,
+  targetRole: UserRole,
+  targetGymId: string | null,
+): boolean {
+  // SuperAdmin can manage anyone
+  if (requesterRole === "superAdmin") {
+    return true;
+  }
+
+  // Role hierarchy: admin > trainer > client
+  const roleHierarchy: Record<UserRole, number> = {
+    superAdmin: 4,
+    admin: 3,
+    trainer: 2,
+    client: 1,
+  };
+
+  const requesterLevel = roleHierarchy[requesterRole];
+  const targetLevel = roleHierarchy[targetRole];
+
+  // Cannot manage users at same or higher level
+  if (requesterLevel <= targetLevel) {
+    return false;
+  }
+
+  // Must have gym access
+  if (!requesterGymId) {
+    return false;
+  }
+
+  // For admin/trainer, target must be in same gym
+  if (requesterRole === "admin" || requesterRole === "trainer") {
+    return requesterGymId === targetGymId;
+  }
+
+  return false;
+}
+
+/**
+ * Check if a trainer can access a specific client's data
+ * Trainer must be assigned to that client via trainerClients table
+ *
+ * @param trainerGymId - Gym ID of the trainer
+ * @param clientGymId - Gym ID of the client
+ * @returns true if in same gym
+ *
+ * @note In a more complex system, this would query trainerClients table
+ * For now, we use gym-based access (trainer and client in same gym)
+ */
+export function canTrainerAccessClient(
+  trainerGymId: string | null,
+  clientGymId: string | null,
+): boolean {
+  if (!trainerGymId || !clientGymId) {
+    return false;
+  }
+  return trainerGymId === clientGymId;
+}
+
+/**
+ * Get the roles that a specific role can invite
+ * Based on role hierarchy
+ *
+ * @param role - The role wanting to invite
+ * @returns Array of roles that can be invited
+ *
+ * @example
+ * getInvitableRoles("superAdmin") // ["admin", "trainer", "client"]
+ * getInvitableRoles("admin")      // ["trainer", "client"]
+ * getInvitableRoles("trainer")    // ["client"]
+ * getInvitableRoles("client")     // []
+ */
+export function getInvitableRoles(role: UserRole): UserRole[] {
+  const invitationRules: Record<UserRole, UserRole[]> = {
+    superAdmin: ["admin", "trainer", "client"],
+    admin: ["trainer", "client"],
+    trainer: ["client"],
+    client: [],
+  };
+
+  return invitationRules[role] ?? [];
+}
+
+/**
+ * Validate gym access and return error response if denied
+ * Use this in API routes to enforce gym-based access control
+ *
+ * @param request - NextRequest for getting query params
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @param targetGymId - Gym being accessed (optional)
+ * @returns NextResponse if denied, undefined if allowed
+ *
+ * @example
+ * export async function GET(request: NextRequest) {
+ *   const error = await validateGymAccess(request, role, gymId);
+ *   if (error) return error;
+ *   // ... proceed
+ * }
+ */
+export function validateGymAccess(
+  userRole: UserRole,
+  userGymId: string | null,
+  targetGymId?: string,
+): NextResponse | undefined {
+  if (!canAccessGym(userRole, userGymId, targetGymId)) {
+    return NextResponse.json(
+      { error: "Forbidden - Cannot access this gym's data" },
+      { status: 403 },
+    );
+  }
+  return undefined;
+}
+
+/**
+ * Get filter condition for gym-scoped queries
+ * Returns appropriate filter based on user role
+ *
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @returns Filter object or undefined (no filter = all gyms)
+ *
+ * @example
+ * // For superAdmin: returns undefined (no filter)
+ * getGymFilter("superAdmin", null) // undefined
+ *
+ * // For admin: returns { gymId: "gym_abc" }
+ * getGymFilter("admin", "gym_abc") // { gymId: "gym_abc" }
+ */
+export function getGymFilter(
+  userRole: UserRole,
+  userGymId: string | null,
+): { gymId: string } | undefined {
+  // SuperAdmin sees all gyms
+  if (userRole === "superAdmin") {
+    return undefined;
+  }
+
+  // Other roles filtered by their gym
+  if (userGymId) {
+    return { gymId: userGymId };
+  }
+
+  // No gym assigned - return filter that matches nothing
+  return { gymId: "" };
+}
+
+/**
+ * Get all gym IDs a user can access
+ * SuperAdmin gets all gyms, others get only their own
+ *
+ * @param userRole - Current user's role
+ * @param userGymId - Current user's gym ID
+ * @param allGymIds - List of all gym IDs in system (for superAdmin)
+ * @returns Array of accessible gym IDs
+ *
+ * @example
+ * getAccessibleGymIds("admin", "gym_abc", ["gym_abc", "gym_xyz"])
+ * // Returns: ["gym_abc"]
+ *
+ * getAccessibleGymIds("superAdmin", null, ["gym_abc", "gym_xyz"])
+ * // Returns: ["gym_abc", "gym_xyz"]
+ */
+export function getAccessibleGymIds(
+  userRole: UserRole,
+  userGymId: string | null,
+  allGymIds: string[],
+): string[] {
+  if (userRole === "superAdmin") {
+    return allGymIds;
+  }
+
+  if (userGymId) {
+    return [userGymId];
+  }
+
+  return [];
+}
@@ -7,6 +7,11 @@ import {
  Recommendation,
  FitnessGoal,
  Notification,
+  DailyNutrition,
+  DailyHydration,
+  MealEntry,
+  FitnessProfileHistory,
+  TrainerClientAssignment,
  DatabaseConfig,
 } from "./types";
 import {
@@ -18,6 +23,11 @@ import {
  recommendations,
  fitnessGoals,
  notifications,
+  dailyNutrition,
+  dailyHydration,
+  mealEntries,
+  fitnessProfileHistory,
+  trainerClientAssignments,
  eq,
  and,
  desc,
@@ -1318,9 +1328,14 @@ export class DrizzleDatabase implements IDatabase {
      membershipStatus: String(
        row.membershipStatus,
      ) as Client["membershipStatus"],
-      joinDate: new Date(row.joinDate as number | Date),
+      joinDate:
+        typeof row.joinDate === "number"
+          ? new Date(row.joinDate * 1000)
+          : new Date(row.joinDate as Date),
      lastVisit: row.lastVisit
-        ? new Date(row.lastVisit as number | Date)
+        ? typeof row.lastVisit === "number"
+          ? new Date(row.lastVisit * 1000)
+          : new Date(row.lastVisit as Date)
        : undefined,
      emergencyContact: row.emergencyContactName
        ? {
@@ -1363,12 +1378,20 @@ export class DrizzleDatabase implements IDatabase {
      id: String(row.id),
      userId: String(row.userId),
      type: String(row.type) as Attendance["type"],
-      checkInTime: new Date(row.checkInTime as number | Date),
+      checkInTime:
+        typeof row.checkInTime === "number"
+          ? new Date(row.checkInTime * 1000)
+          : new Date(row.checkInTime as Date),
      checkOutTime: row.checkOutTime
-        ? new Date(row.checkOutTime as number | Date)
+        ? typeof row.checkOutTime === "number"
+          ? new Date(row.checkOutTime * 1000)
+          : new Date(row.checkOutTime as Date)
        : undefined,
      notes: row.notes ? String(row.notes) : undefined,
-      createdAt: new Date(row.createdAt as number | Date),
+      createdAt:
+        typeof row.createdAt === "number"
+          ? new Date(row.createdAt * 1000)
+          : new Date(row.createdAt as Date),
    };
  }

@@ -1511,4 +1534,651 @@ export class DrizzleDatabase implements IDatabase {
      createdAt,
    };
  }
+
+  // ==================== DAILY NUTRITION OPERATIONS ====================
+
+  async createDailyNutrition(
+    nutrition: Omit<DailyNutrition, "id" | "createdAt" | "updatedAt">,
+  ): Promise<DailyNutrition> {
+    const id = `nutrition_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const now = new Date();
+
+    const newNutrition = {
+      id,
+      ...nutrition,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    await this.db.insert(dailyNutrition).values(newNutrition as any);
+    return this.mapDailyNutrition(newNutrition);
+  }
+
+  async getDailyNutrition(
+    userId: string,
+    date: string,
+  ): Promise<DailyNutrition | null> {
+    const results = await this.db
+      .select()
+      .from(dailyNutrition)
+      .where(
+        and(eq(dailyNutrition.userId, userId), eq(dailyNutrition.date, date)),
+      )
+      .limit(1)
+      .all();
+
+    return results.length > 0 ? this.mapDailyNutrition(results[0]) : null;
+  }
+
+  async getDailyNutritionById(id: string): Promise<DailyNutrition | null> {
+    const results = await this.db
+      .select()
+      .from(dailyNutrition)
+      .where(eq(dailyNutrition.id, id))
+      .limit(1)
+      .all();
+
+    return results.length > 0 ? this.mapDailyNutrition(results[0]) : null;
+  }
+
+  async getDailyNutritionRange(
+    userId: string,
+    startDate: string,
+    endDate: string,
+  ): Promise<DailyNutrition[]> {
+    const results = await this.db
+      .select()
+      .from(dailyNutrition)
+      .where(
+        and(
+          eq(dailyNutrition.userId, userId),
+          gte(dailyNutrition.date, startDate),
+          lte(dailyNutrition.date, endDate),
+        ),
+      )
+      .orderBy(dailyNutrition.date)
+      .all();
+
+    return results.map((row) => this.mapDailyNutrition(row));
+  }
+
+  async updateDailyNutrition(
+    id: string,
+    updates: Partial<DailyNutrition>,
+  ): Promise<DailyNutrition | null> {
+    const { id: _, ...updateData } = updates as any;
+    if (Object.keys(updateData).length === 0) {
+      const existing = await this.db
+        .select()
+        .from(dailyNutrition)
+        .where(eq(dailyNutrition.id, id))
+        .limit(1)
+        .all();
+      return existing.length > 0 ? this.mapDailyNutrition(existing[0]) : null;
+    }
+
+    await this.db
+      .update(dailyNutrition)
+      .set({ ...updateData, updatedAt: new Date() })
+      .where(eq(dailyNutrition.id, id))
+      .run();
+
+    const results = await this.db
+      .select()
+      .from(dailyNutrition)
+      .where(eq(dailyNutrition.id, id))
+      .limit(1)
+      .all();
+
+    return results.length > 0 ? this.mapDailyNutrition(results[0]) : null;
+  }
+
+  async deleteDailyNutrition(id: string): Promise<boolean> {
+    const result = await this.db
+      .delete(dailyNutrition)
+      .where(eq(dailyNutrition.id, id))
+      .run();
+
+    return result.changes > 0;
+  }
+
+  private mapDailyNutrition(row: Record<string, unknown>): DailyNutrition {
+    const createdAtValue = row.createdAt as number | Date;
+    const updatedAtValue = row.updatedAt as number | Date;
+
+    return {
+      id: String(row.id),
+      userId: String(row.userId),
+      date: String(row.date),
+      totalCalories: Number(row.totalCalories || 0),
+      calorieGoal: Number(row.calorieGoal || 2000),
+      meals: row.meals ? (JSON.parse(String(row.meals)) as any) : undefined,
+      createdAt:
+        typeof createdAtValue === "number"
+          ? new Date(createdAtValue * 1000)
+          : new Date(createdAtValue),
+      updatedAt:
+        typeof updatedAtValue === "number"
+          ? new Date(updatedAtValue * 1000)
+          : new Date(updatedAtValue),
+    };
+  }
+
+  // ==================== MEAL ENTRY OPERATIONS ====================
+
+  async createMealEntry(
+    meal: Omit<MealEntry, "id" | "createdAt">,
+  ): Promise<MealEntry> {
+    const id = `meal_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const now = new Date();
+
+    const newMeal = {
+      id,
+      ...meal,
+      createdAt: now,
+    };
+
+    await this.db.insert(mealEntries).values(newMeal as any);
+    return this.mapMealEntry(newMeal);
+  }
+
+  async getMealEntriesByDate(
+    userId: string,
+    date: string,
+  ): Promise<MealEntry[]> {
+    // Parse date string to get start and end of day in seconds
+    const startOfDay = new Date(date);
+    startOfDay.setHours(0, 0, 0, 0);
+    const endOfDay = new Date(date);
+    endOfDay.setHours(23, 59, 59, 999);
+
+    const startTimestamp = Math.floor(startOfDay.getTime() / 1000);
+    const endTimestamp = Math.floor(endOfDay.getTime() / 1000);
+
+    const results = await this.db
+      .select()
+      .from(mealEntries)
+      .where(
+        and(
+          eq(mealEntries.userId, userId),
+          sql`${mealEntries.timestamp} >= ${startTimestamp}`,
+          sql`${mealEntries.timestamp} <= ${endTimestamp}`,
+        ),
+      )
+      .orderBy(mealEntries.timestamp)
+      .all();
+
+    return results.map((row) => this.mapMealEntry(row));
+  }
+
+  async getMealEntryById(id: string): Promise<MealEntry | null> {
+    const results = await this.db
+      .select()
+      .from(mealEntries)
+      .where(eq(mealEntries.id, id))
+      .limit(1)
+      .all();
+
+    return results.length > 0 ? this.mapMealEntry(results[0]) : null;
+  }
+
+  async deleteMealEntry(id: string): Promise<boolean> {
+    const result = await this.db
+      .delete(mealEntries)
+      .where(eq(mealEntries.id, id))
+      .run();
+
+    return result.changes > 0;
+  }
+
+  private mapMealEntry(row: Record<string, unknown>): MealEntry {
+    const timestampValue = row.timestamp as number | Date;
+    const createdAtValue = row.createdAt as number | Date;
+
+    return {
+      id: String(row.id),
+      userId: String(row.userId),
+      dailyNutritionId: row.dailyNutritionId
+        ? String(row.dailyNutritionId)
+        : undefined,
+      mealType: String(row.mealType) as MealEntry["mealType"],
+      foodName: String(row.foodName),
+      calories: Number(row.calories),
+      protein: row.protein ? Number(row.protein) : undefined,
+      carbs: row.carbs ? Number(row.carbs) : undefined,
+      fats: row.fats ? Number(row.fats) : undefined,
+      timestamp:
+        typeof timestampValue === "number"
+          ? new Date(timestampValue * 1000)
+          : new Date(timestampValue),
+      createdAt:
+        typeof createdAtValue === "number"
+          ? new Date(createdAtValue * 1000)
+          : new Date(createdAtValue),
+    };
+  }
+
+  // ==================== DAILY HYDRATION OPERATIONS ====================
+
+  async createDailyHydration(
+    hydration: Omit<DailyHydration, "id" | "createdAt" | "updatedAt">,
+  ): Promise<DailyHydration> {
+    const id = `hydration_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const now = new Date();
+
+    const newHydration = {
+      id,
+      ...hydration,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    await this.db.insert(dailyHydration).values(newHydration as any);
+    return this.mapDailyHydration(newHydration);
+  }
+
+  async getDailyHydration(
+    userId: string,
+    date: string,
+  ): Promise<DailyHydration | null> {
+    const results = await this.db
+      .select()
+      .from(dailyHydration)
+      .where(
+        and(eq(dailyHydration.userId, userId), eq(dailyHydration.date, date)),
+      )
+      .limit(1)
+      .all();
+
+    return results.length > 0 ? this.mapDailyHydration(results[0]) : null;
+  }
+
+  async getDailyHydrationById(id: string): Promise<DailyHydration | null> {
+    const results = await this.db
+      .select()
+      .from(dailyHydration)
+      .where(eq(dailyHydration.id, id))
+      .limit(1)
+      .all();
+
+    return results.length > 0 ? this.mapDailyHydration(results[0]) : null;
+  }
+
+  async getDailyHydrationRange(
+    userId: string,
+    startDate: string,
+    endDate: string,
+  ): Promise<DailyHydration[]> {
+    const results = await this.db
+      .select()
+      .from(dailyHydration)
+      .where(
+        and(
+          eq(dailyHydration.userId, userId),
+          gte(dailyHydration.date, startDate),
+          lte(dailyHydration.date, endDate),
+        ),
+      )
+      .orderBy(dailyHydration.date)
+      .all();
+
+    return results.map((row) => this.mapDailyHydration(row));
+  }
+
+  async updateDailyHydration(
+    id: string,
+    updates: Partial<DailyHydration>,
+  ): Promise<DailyHydration | null> {
+    const { id: _, ...updateData } = updates as any;
+    if (Object.keys(updateData).length === 0) {
+      const existing = await this.db
+        .select()
+        .from(dailyHydration)
+        .where(eq(dailyHydration.id, id))
+        .limit(1)
+        .all();
+      return existing.length > 0 ? this.mapDailyHydration(existing[0]) : null;
+    }
+
+    await this.db
+      .update(dailyHydration)
+      .set({ ...updateData, updatedAt: new Date() })
+      .where(eq(dailyHydration.id, id))
+      .run();
+
+    const results = await this.db
+      .select()
+      .from(dailyHydration)
+      .where(eq(dailyHydration.id, id))
+      .limit(1)
+      .all();
+
+    return results.length > 0 ? this.mapDailyHydration(results[0]) : null;
+  }
+
+  async deleteDailyHydration(id: string): Promise<boolean> {
+    const result = await this.db
+      .delete(dailyHydration)
+      .where(eq(dailyHydration.id, id))
+      .run();
+
+    return result.changes > 0;
+  }
+
+  private mapDailyHydration(row: Record<string, unknown>): DailyHydration {
+    const createdAtValue = row.createdAt as number | Date;
+    const updatedAtValue = row.updatedAt as number | Date;
+
+    return {
+      id: String(row.id),
+      userId: String(row.userId),
+      date: String(row.date),
+      totalWater: Number(row.totalWater || 0),
+      waterGoal: Number(row.waterGoal || 2000),
+      entries: row.entries
+        ? (JSON.parse(String(row.entries)) as any)
+        : undefined,
+      createdAt:
+        typeof createdAtValue === "number"
+          ? new Date(createdAtValue * 1000)
+          : new Date(createdAtValue),
+      updatedAt:
+        typeof updatedAtValue === "number"
+          ? new Date(updatedAtValue * 1000)
+          : new Date(updatedAtValue),
+    };
+  }
+
+  // ==================== FITNESS PROFILE HISTORY OPERATIONS ====================
+
+  async createFitnessProfileHistory(
+    history: Omit<FitnessProfileHistory, "id" | "createdAt">,
+  ): Promise<FitnessProfileHistory> {
+    const id = `profile_history_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const now = new Date();
+
+    const newHistory = {
+      id,
+      ...history,
+      createdAt: now,
+    };
+
+    await this.db.insert(fitnessProfileHistory).values(newHistory as any);
+    return this.mapFitnessProfileHistory(newHistory);
+  }
+
+  async getFitnessProfileHistory(
+    userId: string,
+    startDate?: Date,
+    endDate?: Date,
+  ): Promise<FitnessProfileHistory[]> {
+    const conditions = [eq(fitnessProfileHistory.userId, userId)];
+
+    if (startDate) {
+      const startTimestamp = Math.floor(startDate.getTime() / 1000);
+      conditions.push(
+        sql`${fitnessProfileHistory.changedAt} >= ${startTimestamp}`,
+      );
+    }
+
+    if (endDate) {
+      const endTimestamp = Math.floor(endDate.getTime() / 1000);
+      conditions.push(
+        sql`${fitnessProfileHistory.changedAt} <= ${endTimestamp}`,
+      );
+    }
+
+    const results = await this.db
+      .select()
+      .from(fitnessProfileHistory)
+      .where(and(...conditions))
+      .orderBy(desc(fitnessProfileHistory.changedAt))
+      .all();
+
+    return results.map((row) => this.mapFitnessProfileHistory(row));
+  }
+
+  async getWeightHistory(
+    userId: string,
+    startDate: Date,
+    endDate: Date,
+  ): Promise<FitnessProfileHistory[]> {
+    const startTimestamp = Math.floor(startDate.getTime() / 1000);
+    const endTimestamp = Math.floor(endDate.getTime() / 1000);
+
+    const results = await this.db
+      .select()
+      .from(fitnessProfileHistory)
+      .where(
+        and(
+          eq(fitnessProfileHistory.userId, userId),
+          eq(fitnessProfileHistory.changeType, "weight"),
+          sql`${fitnessProfileHistory.changedAt} >= ${startTimestamp}`,
+          sql`${fitnessProfileHistory.changedAt} <= ${endTimestamp}`,
+        ),
+      )
+      .orderBy(fitnessProfileHistory.changedAt)
+      .all();
+
+    return results.map((row) => this.mapFitnessProfileHistory(row));
+  }
+
+  private mapFitnessProfileHistory(
+    row: Record<string, unknown>,
+  ): FitnessProfileHistory {
+    const changedAtValue = row.changedAt as number | Date;
+    const createdAtValue = row.createdAt as number | Date;
+
+    return {
+      id: String(row.id),
+      userId: String(row.userId),
+      fitnessProfileId: String(row.fitnessProfileId),
+      changeType: String(row.changeType) as FitnessProfileHistory["changeType"],
+      fieldName: String(row.fieldName),
+      previousValue: row.previousValue ? String(row.previousValue) : undefined,
+      newValue: row.newValue ? String(row.newValue) : undefined,
+      changedAt:
+        typeof changedAtValue === "number"
+          ? new Date(changedAtValue * 1000)
+          : new Date(changedAtValue),
+      createdAt:
+        typeof createdAtValue === "number"
+          ? new Date(createdAtValue * 1000)
+          : new Date(createdAtValue),
+    };
+  }
+
+  // ==================== TRAINER-CLIENT ASSIGNMENT OPERATIONS ====================
+
+  async createTrainerClientAssignment(
+    assignment: Omit<TrainerClientAssignment, "id" | "createdAt" | "updatedAt">,
+  ): Promise<TrainerClientAssignment> {
+    const id = `assignment_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    const now = new Date();
+
+    const newAssignment = {
+      id,
+      ...assignment,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    await this.db.insert(trainerClientAssignments).values(newAssignment as any);
+    return this.mapTrainerClientAssignment(newAssignment);
+  }
+
+  async getTrainerClientAssignments(
+    trainerId: string,
+  ): Promise<TrainerClientAssignment[]> {
+    const results = await this.db
+      .select()
+      .from(trainerClientAssignments)
+      .where(
+        and(
+          eq(trainerClientAssignments.trainerId, trainerId),
+          eq(trainerClientAssignments.isActive, true),
+        ),
+      )
+      .orderBy(desc(trainerClientAssignments.assignedAt))
+      .all();
+
+    return results.map((row) => this.mapTrainerClientAssignment(row));
+  }
+
+  async getClientTrainerAssignment(
+    clientId: string,
+  ): Promise<TrainerClientAssignment | null> {
+    const results = await this.db
+      .select()
+      .from(trainerClientAssignments)
+      .where(
+        and(
+          eq(trainerClientAssignments.clientId, clientId),
+          eq(trainerClientAssignments.isActive, true),
+        ),
+      )
+      .limit(1)
+      .all();
+
+    return results.length > 0
+      ? this.mapTrainerClientAssignment(results[0])
+      : null;
+  }
+
+  async deleteTrainerClientAssignment(id: string): Promise<boolean> {
+    const result = await this.db
+      .delete(trainerClientAssignments)
+      .where(eq(trainerClientAssignments.id, id))
+      .run();
+
+    return result.changes > 0;
+  }
+
+  async deactivateTrainerClientAssignment(
+    id: string,
+  ): Promise<TrainerClientAssignment | null> {
+    await this.db
+      .update(trainerClientAssignments)
+      .set({ isActive: false, updatedAt: new Date() })
+      .where(eq(trainerClientAssignments.id, id))
+      .run();
+
+    const results = await this.db
+      .select()
+      .from(trainerClientAssignments)
+      .where(eq(trainerClientAssignments.id, id))
+      .limit(1)
+      .all();
+
+    return results.length > 0
+      ? this.mapTrainerClientAssignment(results[0])
+      : null;
+  }
+
+  private mapTrainerClientAssignment(
+    row: Record<string, unknown>,
+  ): TrainerClientAssignment {
+    const assignedAtValue = row.assignedAt as number | Date;
+    const createdAtValue = row.createdAt as number | Date;
+    const updatedAtValue = row.updatedAt as number | Date;
+
+    return {
+      id: String(row.id),
+      trainerId: String(row.trainerId),
+      clientId: String(row.clientId),
+      assignedAt:
+        typeof assignedAtValue === "number"
+          ? new Date(assignedAtValue * 1000)
+          : new Date(assignedAtValue),
+      assignedBy: row.assignedBy ? String(row.assignedBy) : undefined,
+      isActive: Boolean(row.isActive),
+      createdAt:
+        typeof createdAtValue === "number"
+          ? new Date(createdAtValue * 1000)
+          : new Date(createdAtValue),
+      updatedAt:
+        typeof updatedAtValue === "number"
+          ? new Date(updatedAtValue * 1000)
+          : new Date(updatedAtValue),
+    };
+  }
+
+  // ==================== ENHANCED ATTENDANCE OPERATIONS FOR REPORTS ====================
+
+  async getAttendanceByWeek(
+    userId: string,
+    weekStart: Date,
+  ): Promise<Attendance[]> {
+    // Calculate week end (Sunday at 23:59:59)
+    const weekEnd = new Date(weekStart);
+    weekEnd.setDate(weekEnd.getDate() + 6);
+    weekEnd.setHours(23, 59, 59, 999);
+
+    const startTimestamp = Math.floor(weekStart.getTime() / 1000);
+    const endTimestamp = Math.floor(weekEnd.getTime() / 1000);
+
+    const results = await this.db
+      .select()
+      .from(attendance)
+      .where(
+        and(
+          eq(attendance.userId, userId),
+          sql`${attendance.checkInTime} >= ${startTimestamp}`,
+          sql`${attendance.checkInTime} <= ${endTimestamp}`,
+        ),
+      )
+      .orderBy(attendance.checkInTime)
+      .all();
+
+    return results.map((row) => this.mapAttendance(row));
+  }
+
+  async calculateWeeklyCheckInStats(
+    userId: string,
+    weekStart: Date,
+  ): Promise<{
+    totalCheckIns: number;
+    totalTimeSpent: number;
+    avgSessionDuration: number;
+    byType: { gym: number; class: number; personal_training: number };
+  }> {
+    const attendanceRecords = await this.getAttendanceByWeek(userId, weekStart);
+
+    const stats = {
+      totalCheckIns: attendanceRecords.length,
+      totalTimeSpent: 0,
+      avgSessionDuration: 0,
+      byType: {
+        gym: 0,
+        class: 0,
+        personal_training: 0,
+      },
+    };
+
+    let completedSessions = 0;
+
+    for (const record of attendanceRecords) {
+      // Count by type
+      if (record.type === "gym") stats.byType.gym++;
+      else if (record.type === "class") stats.byType.class++;
+      else if (record.type === "personal_training")
+        stats.byType.personal_training++;
+
+      // Calculate time spent (only for completed sessions with check-out)
+      if (record.checkOutTime) {
+        const duration =
+          (record.checkOutTime.getTime() - record.checkInTime.getTime()) /
+          (1000 * 60); // in minutes
+        stats.totalTimeSpent += duration;
+        completedSessions++;
+      }
+    }
+
+    // Calculate average session duration
+    if (completedSessions > 0) {
+      stats.avgSessionDuration = stats.totalTimeSpent / completedSessions;
+    }
+
+    return stats;
+  }
 }
@@ -6,6 +6,11 @@ import {
  Recommendation,
  FitnessGoal,
  Notification,
+  DailyNutrition,
+  DailyHydration,
+  MealEntry,
+  FitnessProfileHistory,
+  TrainerClientAssignment,
 } from "@fitai/shared";
 import type { SortConfig, FilterCondition } from "../filtering";

@@ -23,6 +28,11 @@ export type {
  Recommendation,
  FitnessGoal,
  Notification,
+  DailyNutrition,
+  DailyHydration,
+  MealEntry,
+  FitnessProfileHistory,
+  TrainerClientAssignment,
 };

 // Database Interface - allows us to swap implementations
@@ -188,6 +198,100 @@ export interface IDatabase {
    totalRevenue: number;
    revenueGrowth: number; // Percentage vs last month
  }>;
+
+  // Daily Nutrition operations
+  createDailyNutrition(
+    nutrition: Omit<DailyNutrition, "id" | "createdAt" | "updatedAt">,
+  ): Promise<DailyNutrition>;
+  getDailyNutrition(
+    userId: string,
+    date: string,
+  ): Promise<DailyNutrition | null>;
+  getDailyNutritionById(id: string): Promise<DailyNutrition | null>;
+  getDailyNutritionRange(
+    userId: string,
+    startDate: string,
+    endDate: string,
+  ): Promise<DailyNutrition[]>;
+  updateDailyNutrition(
+    id: string,
+    updates: Partial<DailyNutrition>,
+  ): Promise<DailyNutrition | null>;
+  deleteDailyNutrition(id: string): Promise<boolean>;
+
+  // Meal Entry operations
+  createMealEntry(
+    meal: Omit<MealEntry, "id" | "createdAt">,
+  ): Promise<MealEntry>;
+  getMealEntriesByDate(userId: string, date: string): Promise<MealEntry[]>;
+  getMealEntryById(id: string): Promise<MealEntry | null>;
+  deleteMealEntry(id: string): Promise<boolean>;
+
+  // Daily Hydration operations
+  createDailyHydration(
+    hydration: Omit<DailyHydration, "id" | "createdAt" | "updatedAt">,
+  ): Promise<DailyHydration>;
+  getDailyHydration(
+    userId: string,
+    date: string,
+  ): Promise<DailyHydration | null>;
+  getDailyHydrationById(id: string): Promise<DailyHydration | null>;
+  getDailyHydrationRange(
+    userId: string,
+    startDate: string,
+    endDate: string,
+  ): Promise<DailyHydration[]>;
+  updateDailyHydration(
+    id: string,
+    updates: Partial<DailyHydration>,
+  ): Promise<DailyHydration | null>;
+  deleteDailyHydration(id: string): Promise<boolean>;
+
+  // Fitness Profile History operations
+  createFitnessProfileHistory(
+    history: Omit<FitnessProfileHistory, "id" | "createdAt">,
+  ): Promise<FitnessProfileHistory>;
+  getFitnessProfileHistory(
+    userId: string,
+    startDate?: Date,
+    endDate?: Date,
+  ): Promise<FitnessProfileHistory[]>;
+  getWeightHistory(
+    userId: string,
+    startDate: Date,
+    endDate: Date,
+  ): Promise<FitnessProfileHistory[]>;
+
+  // Trainer-Client Assignment operations
+  createTrainerClientAssignment(
+    assignment: Omit<TrainerClientAssignment, "id" | "createdAt" | "updatedAt">,
+  ): Promise<TrainerClientAssignment>;
+  getTrainerClientAssignments(
+    trainerId: string,
+  ): Promise<TrainerClientAssignment[]>;
+  getClientTrainerAssignment(
+    clientId: string,
+  ): Promise<TrainerClientAssignment | null>;
+  deleteTrainerClientAssignment(id: string): Promise<boolean>;
+  deactivateTrainerClientAssignment(
+    id: string,
+  ): Promise<TrainerClientAssignment | null>;
+
+  // Enhanced Attendance operations for reports
+  getAttendanceByWeek(userId: string, weekStart: Date): Promise<Attendance[]>;
+  calculateWeeklyCheckInStats(
+    userId: string,
+    weekStart: Date,
+  ): Promise<{
+    totalCheckIns: number;
+    totalTimeSpent: number; // in minutes
+    avgSessionDuration: number; // in minutes
+    byType: {
+      gym: number;
+      class: number;
+      personal_training: number;
+    };
+  }>;
 }

 // Database configuration
@@ -0,0 +1,149 @@
+import { getDatabase } from "@/lib/database";
+
+/**
+ * Get users filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by (undefined returns all users for superAdmin)
+ * @returns Array of users in the gym
+ */
+export async function getUsersByGym(gymId?: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+
+  if (!gymId) {
+    return allUsers;
+  }
+
+  return allUsers.filter((u) => u.gymId === gymId);
+}
+
+/**
+ * Get clients filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of clients in the gym
+ */
+export async function getClientsByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allClients = await db.getAllClients();
+
+  const gymClientUserIds = allUsers
+    .filter((u) => u.gymId === gymId && u.role === "client")
+    .map((u) => u.id);
+
+  if (gymClientUserIds.length === 0) {
+    return [];
+  }
+
+  return allClients.filter((c) => gymClientUserIds.includes(c.userId));
+}
+
+/**
+ * Get trainers filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of trainers in the gym
+ */
+export async function getTrainersByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+
+  return allUsers.filter((u) => u.gymId === gymId && u.role === "trainer");
+}
+
+/**
+ * Get attendance filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of attendance records in the gym
+ */
+export async function getAttendanceByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allAttendance = await db.getAllAttendance();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  return allAttendance.filter((a) => gymUserIds.includes(a.userId));
+}
+
+/**
+ * Get recommendations filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of recommendations in the gym
+ */
+export async function getRecommendationsByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allRecommendations = await db.getAllRecommendations();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  return allRecommendations.filter((r) => gymUserIds.includes(r.userId));
+}
+
+/**
+ * Get fitness profiles filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of fitness profiles in the gym
+ */
+export async function getFitnessProfilesByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+  const allProfiles = await db.getAllFitnessProfiles();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  return allProfiles.filter((p) => gymUserIds.includes(p.userId));
+}
+
+/**
+ * Get fitness goals filtered by gym ID
+ *
+ * @param gymId - Gym ID to filter by
+ * @returns Array of fitness goals in the gym
+ */
+export async function getFitnessGoalsByGym(gymId: string) {
+  const db = await getDatabase();
+  const allUsers = await db.getAllUsers();
+
+  const gymUserIds = allUsers.filter((u) => u.gymId === gymId).map((u) => u.id);
+
+  if (gymUserIds.length === 0) {
+    return [];
+  }
+
+  const allGoals: any[] = [];
+  for (const userId of gymUserIds) {
+    const goals = await db.getFitnessGoalsByUserId(userId);
+    allGoals.push(...goals);
+  }
+
+  return allGoals.sort(
+    (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
+  );
+}
+
+/**
+ * Get user by ID and check if they belong to a specific gym
+ */
+export async function getUserGymId(userId: string): Promise<string | null> {
+  const db = await getDatabase();
+  const user = await db.getUserById(userId);
+  return user?.gymId ?? null;
+}
@@ -0,0 +1,138 @@
+/**
+ * Migration Script: Fix gym assignments for users without gymId
+ *
+ * This script:
+ * 1. Finds all users with null gymId
+ * 2. For admins: Assigns them to gym where they are adminUserId
+ * 3. For trainers: Gets gymId from their trainerClients records
+ * 4. For clients: Gets gymId from trainerClients or leaves as null for manual review
+ *
+ * Run with: node apps/admin/src/lib/migrations/fix-gym-assignments.js
+ *
+ * Note: Run this AFTER setting up the database, before starting the app
+ */
+
+const Database = require("better-sqlite3");
+
+// Use absolute path to the database - this is where the app stores data
+const dbPath = "/home/echo/dev/prototype/apps/admin/data/fitai.db";
+
+function fixGymAssignments() {
+  console.log("Starting gym assignment migration...\n");
+  console.log(`Database path: ${dbPath}\n`);
+
+  const db = new Database(dbPath);
+
+  // Step 1: Find all users without gymId
+  const usersWithoutGym = db
+    .prepare(
+      `
+    SELECT id, email, role FROM users WHERE gym_id IS NULL
+  `,
+    )
+    .all();
+
+  console.log(`Found ${usersWithoutGym.length} users without gymId`);
+
+  let adminsFixed = 0;
+  let trainersFixed = 0;
+  let clientsFixed = 0;
+  const unableToFix = [];
+
+  for (const user of usersWithoutGym) {
+    try {
+      if (user.role === "admin") {
+        // Find gym where this user is admin
+        const gym = db
+          .prepare(
+            `
+          SELECT id, name FROM gyms WHERE admin_user_id = ?
+        `,
+          )
+          .get(user.id);
+
+        if (gym) {
+          db.prepare(
+            `
+            UPDATE users SET gym_id = ? WHERE id = ?
+          `,
+          ).run(gym.id, user.id);
+
+          console.log(`  ✓ Fixed admin ${user.email} -> gym ${gym.name}`);
+          adminsFixed++;
+        } else {
+          unableToFix.push(`Admin ${user.email} (no gym found)`);
+        }
+      } else if (user.role === "trainer") {
+        // Get gym from trainerClients
+        const tc = db
+          .prepare(
+            `
+          SELECT gym_id FROM trainer_clients WHERE trainer_user_id = ? LIMIT 1
+        `,
+          )
+          .get(user.id);
+
+        if (tc) {
+          db.prepare(
+            `
+            UPDATE users SET gym_id = ? WHERE id = ?
+          `,
+          ).run(tc.gym_id, user.id);
+
+          console.log(`  ✓ Fixed trainer ${user.email} -> gym ${tc.gym_id}`);
+          trainersFixed++;
+        } else {
+          unableToFix.push(`Trainer ${user.email} (no trainerClients record)`);
+        }
+      } else if (user.role === "client") {
+        // Get gym from trainerClients
+        const tc = db
+          .prepare(
+            `
+          SELECT gym_id FROM trainer_clients WHERE client_user_id = ? LIMIT 1
+        `,
+          )
+          .get(user.id);
+
+        if (tc) {
+          db.prepare(
+            `
+            UPDATE users SET gym_id = ? WHERE id = ?
+          `,
+          ).run(tc.gym_id, user.id);
+
+          console.log(`  ✓ Fixed client ${user.email} -> gym ${tc.gym_id}`);
+          clientsFixed++;
+        } else {
+          unableToFix.push(`Client ${user.email} (no trainer assignment)`);
+        }
+      }
+    } catch (error) {
+      console.error(`  ✗ Error fixing user ${user.email}:`, error.message);
+      unableToFix.push(`User ${user.email} (error: ${error.message})`);
+    }
+  }
+
+  db.close();
+
+  console.log("\n=== Migration Summary ===");
+  console.log(`Admins fixed: ${adminsFixed}`);
+  console.log(`Trainers fixed: ${trainersFixed}`);
+  console.log(`Clients fixed: ${clientsFixed}`);
+  console.log(`Unable to fix: ${unableToFix.length}`);
+
+  if (unableToFix.length > 0) {
+    console.log("\nUsers requiring manual review:");
+    unableToFix.forEach((u) => console.log(`  - ${u}`));
+  }
+
+  console.log("\nMigration complete!");
+}
+
+// Run if called directly
+if (require.main === module) {
+  fixGymAssignments();
+}
+
+module.exports = { fixGymAssignments };
@@ -0,0 +1,236 @@
+import type { UserReport, User, Client, FitnessProfile } from "@fitai/shared";
+
+// Mock data for testing
+const mockUser: User = {
+  id: "user_123",
+  email: "john.doe@example.com",
+  firstName: "John",
+  lastName: "Doe",
+  role: "client",
+  phone: "555-1234",
+  createdAt: new Date("2024-01-15"),
+  updatedAt: new Date("2024-01-15"),
+};
+
+const mockClient: Client = {
+  id: "client_123",
+  userId: "user_123",
+  membershipType: "premium",
+  membershipStatus: "active",
+  joinDate: new Date("2024-01-15"),
+};
+
+const mockProfile: FitnessProfile = {
+  id: "profile_123",
+  userId: "user_123",
+  height: 175,
+  weight: 70,
+  age: 30,
+  gender: "male",
+  activityLevel: "moderately_active",
+  createdAt: new Date("2024-01-15"),
+  updatedAt: new Date("2024-01-15"),
+};
+
+const mockReport: UserReport = {
+  userId: "user_123",
+  user: mockUser,
+  client: mockClient,
+  fitnessProfile: mockProfile,
+  reportPeriod: {
+    startDate: "2024-01-01",
+    endDate: "2024-01-31",
+  },
+  weeklyCheckIns: [
+    {
+      weekStart: "2024-01-01",
+      weekEnd: "2024-01-07",
+      totalCheckIns: 4,
+      totalTimeMinutes: 240,
+      averageDurationMinutes: 60,
+      checkInsByType: [
+        { type: "gym", count: 3 },
+        { type: "class", count: 1 },
+      ],
+    },
+    {
+      weekStart: "2024-01-08",
+      weekEnd: "2024-01-14",
+      totalCheckIns: 5,
+      totalTimeMinutes: 300,
+      averageDurationMinutes: 60,
+      checkInsByType: [
+        { type: "gym", count: 4 },
+        { type: "class", count: 1 },
+      ],
+    },
+  ],
+  nutrition: {
+    dailySummaries: [
+      {
+        date: "2024-01-01",
+        totalCalories: 2000,
+        calorieGoal: 2200,
+        caloriesDelta: -200,
+        mealsCount: 3,
+      },
+      {
+        date: "2024-01-02",
+        totalCalories: 2300,
+        calorieGoal: 2200,
+        caloriesDelta: 100,
+        mealsCount: 4,
+      },
+    ],
+    averageDailyCalories: 2150,
+    totalDays: 2,
+    daysMetGoal: 1,
+  },
+  hydration: {
+    dailySummaries: [
+      {
+        date: "2024-01-01",
+        totalWater: 2000,
+        waterGoal: 2500,
+        hydrationPercentage: 80,
+      },
+      {
+        date: "2024-01-02",
+        totalWater: 2600,
+        waterGoal: 2500,
+        hydrationPercentage: 104,
+      },
+    ],
+    averageDailyWater: 2300,
+    totalDays: 2,
+    daysMetGoal: 1,
+  },
+  goals: {
+    active: [
+      {
+        id: "goal_1",
+        userId: "user_123",
+        goalType: "weight_target",
+        title: "Lose 5kg",
+        description: "Lose weight for summer",
+        targetValue: 65,
+        currentValue: 70,
+        unit: "kg",
+        startDate: new Date("2024-01-01"),
+        status: "active",
+        progress: 0,
+        priority: "high",
+        createdAt: new Date("2024-01-01"),
+        updatedAt: new Date("2024-01-01"),
+      },
+    ],
+    completed: [
+      {
+        id: "goal_2",
+        userId: "user_123",
+        goalType: "strength_milestone",
+        title: "Bench press 100kg",
+        targetValue: 100,
+        currentValue: 100,
+        unit: "kg",
+        startDate: new Date("2023-11-01"),
+        completedDate: new Date("2023-12-15"),
+        status: "completed",
+        progress: 100,
+        priority: "medium",
+        createdAt: new Date("2023-11-01"),
+        updatedAt: new Date("2023-12-15"),
+      },
+    ],
+    totalActive: 1,
+    totalCompleted: 1,
+    averageProgress: 0,
+  },
+  profileHistory: [
+    {
+      changeType: "weight",
+      fieldName: "weight",
+      previousValue: "72",
+      newValue: "70",
+      changedAt: new Date("2024-01-15"),
+    },
+  ],
+  recommendations: {
+    accepted: [
+      {
+        id: "rec_1",
+        userId: "user_123",
+        fitnessProfileId: "profile_123",
+        recommendationText: "Increase protein intake to 150g per day",
+        activityPlan: "High protein diet",
+        dietPlan: "Protein focused",
+        status: "approved",
+        generatedAt: new Date("2024-01-10"),
+        approvedAt: new Date("2024-01-11"),
+        approvedBy: "user_trainer",
+        createdAt: new Date("2024-01-10"),
+        updatedAt: new Date("2024-01-11"),
+      },
+    ],
+    rejected: [],
+    pending: [
+      {
+        id: "rec_2",
+        userId: "user_123",
+        fitnessProfileId: "profile_123",
+        recommendationText: "Try HIIT workouts 3 times per week",
+        activityPlan: "HIIT training",
+        dietPlan: "No change",
+        status: "pending",
+        generatedAt: new Date("2024-01-20"),
+        createdAt: new Date("2024-01-20"),
+        updatedAt: new Date("2024-01-20"),
+      },
+    ],
+    totalAccepted: 1,
+    totalRejected: 0,
+    totalPending: 1,
+  },
+  generatedAt: new Date(),
+};
+
+// Test function
+export async function testPDFGeneration() {
+  try {
+    const { generateReportPDFBase64 } = await import(
+      "@/lib/pdf/report-helpers"
+    );
+
+    console.log("Generating PDF from mock report...");
+    const pdfBase64 = generateReportPDFBase64(mockReport);
+
+    console.log(`PDF generated successfully!`);
+    console.log(`PDF size: ${Math.round(pdfBase64.length / 1024)} KB`);
+
+    // Verify it's a valid base64 string
+    if (pdfBase64.startsWith("JVBERi0")) {
+      console.log("✓ PDF is valid (starts with PDF header)");
+    } else {
+      console.log("✗ PDF is invalid");
+    }
+
+    return true;
+  } catch (error) {
+    console.error("✗ PDF generation failed:", error);
+    return false;
+  }
+}
+
+// Run if executed directly
+if (typeof window === "undefined" && process.argv[1]?.includes("test-pdf")) {
+  testPDFGeneration()
+    .then((success) => {
+      process.exit(success ? 0 : 1);
+    })
+    .catch((err) => {
+      console.error(err);
+      process.exit(1);
+    });
+}
+
+export default testPDFGeneration;
@@ -0,0 +1,316 @@
+import jsPDF from "jspdf";
+
+export interface ChartData {
+  labels: string[];
+  datasets: {
+    label: string;
+    data: number[];
+    color?: string;
+  }[];
+}
+
+export interface ChartConfig {
+  title?: string;
+  width: number;
+  height: number;
+}
+
+/**
+ * Generate a bar chart image as a data URL
+ */
+export function generateBarChart(data: ChartData, config: ChartConfig): string {
+  const canvas = createCanvas(config.width, config.height);
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Could not get canvas context");
+  }
+
+  const padding = 40;
+  const chartWidth = config.width - padding * 2;
+  const chartHeight = config.height - padding * 2;
+  const barWidth = chartWidth / data.labels.length - 10;
+
+  // Clear canvas
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, config.width, config.height);
+
+  // Add title if provided
+  if (config.title) {
+    ctx.fillStyle = "#000000";
+    ctx.font = "bold 14px Arial";
+    ctx.textAlign = "center";
+    ctx.fillText(config.title, config.width / 2, 20);
+  }
+
+  // Calculate max value
+  const maxValue = Math.max(
+    ...data.datasets.flatMap((dataset) => dataset.data),
+  );
+
+  // Draw bars
+  data.datasets.forEach((dataset, datasetIndex) => {
+    const color = dataset.color || getDefaultColor(datasetIndex);
+    ctx.fillStyle = color;
+
+    dataset.data.forEach((value, index) => {
+      const x =
+        padding +
+        index * (barWidth + 10) +
+        (datasetIndex * barWidth) / data.datasets.length;
+      const barHeight = (value / maxValue) * chartHeight;
+      const y = config.height - padding - barHeight;
+
+      ctx.fillRect(x, y, barWidth / data.datasets.length - 2, barHeight);
+
+      // Draw value on top
+      ctx.fillStyle = "#000000";
+      ctx.font = "10px Arial";
+      ctx.textAlign = "center";
+      ctx.fillText(
+        value.toString(),
+        x + barWidth / data.datasets.length / 2,
+        y - 5,
+      );
+      ctx.fillStyle = color;
+    });
+  });
+
+  // Draw labels
+  ctx.fillStyle = "#000000";
+  ctx.font = "11px Arial";
+  ctx.textAlign = "center";
+  data.labels.forEach((label, index) => {
+    const x = padding + index * (barWidth + 10) + barWidth / 2;
+    ctx.fillText(label, x, config.height - padding + 15);
+  });
+
+  // Draw axes
+  ctx.strokeStyle = "#cccccc";
+  ctx.beginPath();
+  ctx.moveTo(padding, padding);
+  ctx.lineTo(padding, config.height - padding);
+  ctx.lineTo(config.width - padding, config.height - padding);
+  ctx.stroke();
+
+  return canvas.toDataURL("image/png");
+}
+
+/**
+ * Generate a line chart image as a data URL
+ */
+export function generateLineChart(
+  data: ChartData,
+  config: ChartConfig,
+): string {
+  const canvas = createCanvas(config.width, config.height);
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Could not get canvas context");
+  }
+
+  const padding = 40;
+  const chartWidth = config.width - padding * 2;
+  const chartHeight = config.height - padding * 2;
+
+  // Clear canvas
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, config.width, config.height);
+
+  // Add title if provided
+  if (config.title) {
+    ctx.fillStyle = "#000000";
+    ctx.font = "bold 14px Arial";
+    ctx.textAlign = "center";
+    ctx.fillText(config.title, config.width / 2, 20);
+  }
+
+  // Calculate max value
+  const maxValue = Math.max(
+    ...data.datasets.flatMap((dataset) => dataset.data),
+    1,
+  );
+
+  // Draw grid lines
+  ctx.strokeStyle = "#f0f0f0";
+  ctx.lineWidth = 1;
+  for (let i = 0; i <= 5; i++) {
+    const y = padding + (i * chartHeight) / 5;
+    ctx.beginPath();
+    ctx.moveTo(padding, y);
+    ctx.lineTo(config.width - padding, y);
+    ctx.stroke();
+
+    // Draw value labels
+    ctx.fillStyle = "#666666";
+    ctx.font = "10px Arial";
+    ctx.textAlign = "right";
+    const value = Math.round(maxValue - (i * maxValue) / 5);
+    ctx.fillText(value.toString(), padding - 5, y + 3);
+  }
+
+  // Draw lines
+  data.datasets.forEach((dataset, datasetIndex) => {
+    const color = dataset.color || getDefaultColor(datasetIndex);
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+
+    dataset.data.forEach((value, index) => {
+      const x = padding + (index * chartWidth) / (data.labels.length - 1);
+      const y = config.height - padding - (value / maxValue) * chartHeight;
+
+      if (index === 0) {
+        ctx.moveTo(x, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+    });
+
+    ctx.stroke();
+
+    // Draw points
+    ctx.fillStyle = color;
+    dataset.data.forEach((value, index) => {
+      const x = padding + (index * chartWidth) / (data.labels.length - 1);
+      const y = config.height - padding - (value / maxValue) * chartHeight;
+
+      ctx.beginPath();
+      ctx.arc(x, y, 4, 0, 2 * Math.PI);
+      ctx.fill();
+    });
+  });
+
+  // Draw labels
+  ctx.fillStyle = "#000000";
+  ctx.font = "11px Arial";
+  ctx.textAlign = "center";
+  data.labels.forEach((label, index) => {
+    const x = padding + (index * chartWidth) / (data.labels.length - 1);
+    ctx.fillText(label, x, config.height - padding + 15);
+  });
+
+  // Draw axes
+  ctx.strokeStyle = "#cccccc";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.moveTo(padding, padding);
+  ctx.lineTo(padding, config.height - padding);
+  ctx.lineTo(config.width - padding, config.height - padding);
+  ctx.stroke();
+
+  return canvas.toDataURL("image/png");
+}
+
+/**
+ * Generate a pie chart image as a data URL
+ */
+export function generatePieChart(data: ChartData, config: ChartConfig): string {
+  const canvas = createCanvas(config.width, config.height);
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Could not get canvas context");
+  }
+
+  const centerX = config.width / 2;
+  const centerY = config.height / 2;
+  const radius = Math.min(config.width, config.height) / 2 - 40;
+
+  // Clear canvas
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, config.width, config.height);
+
+  // Add title if provided
+  if (config.title) {
+    ctx.fillStyle = "#000000";
+    ctx.font = "bold 14px Arial";
+    ctx.textAlign = "center";
+    ctx.fillText(config.title, config.width / 2, 20);
+  }
+
+  // Calculate total
+  const total = data.datasets[0]?.data.reduce((sum, val) => sum + val, 0) || 0;
+
+  // Draw pie slices
+  let startAngle = 0;
+  data.datasets[0]?.data.forEach((value, index) => {
+    const sliceAngle = (value / total) * 2 * Math.PI;
+    const color = data.datasets[0].color || getDefaultColor(index);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(centerX, centerY);
+    ctx.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle);
+    ctx.closePath();
+    ctx.fill();
+
+    // Draw label
+    const midAngle = startAngle + sliceAngle / 2;
+    const labelX = centerX + (radius + 20) * Math.cos(midAngle);
+    const labelY = centerY + (radius + 20) * Math.sin(midAngle);
+
+    ctx.fillStyle = "#000000";
+    ctx.font = "11px Arial";
+    ctx.textAlign = "center";
+    ctx.fillText(`${data.labels[index]}: ${value}`, labelX, labelY);
+
+    startAngle += sliceAngle;
+  });
+
+  return canvas.toDataURL("image/png");
+}
+
+/**
+ * Helper function to create a canvas element
+ */
+function createCanvas(width: number, height: number): HTMLCanvasElement {
+  if (typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas;
+  }
+  // Fallback for server-side rendering
+  const Canvas = require("canvas");
+  return new Canvas(width, height);
+}
+
+/**
+ * Get default color for a dataset index
+ */
+function getDefaultColor(index: number): string {
+  const colors = [
+    "#3c82e1", // primary
+    "#2ea643", // success
+    "#f0a500", // warning
+    "#d73232", // destructive
+    "#8b5cf6", // purple
+    "#06b6d4", // cyan
+  ];
+  return colors[index % colors.length];
+}
+
+/**
+ * Add chart image to PDF
+ */
+export function addChartToPDF(
+  pdf: jsPDF,
+  imageData: string,
+  x: number,
+  y: number,
+  width?: number,
+  height?: number,
+): void {
+  const imgWidth = width || 150;
+  const imgHeight = height || 80;
+  pdf.addImage(imageData, "PNG", x, y, imgWidth, imgHeight);
+}
+
+export default {
+  generateBarChart,
+  generateLineChart,
+  generatePieChart,
+  addChartToPDF,
+};
@@ -0,0 +1,15 @@
+export { default as PDFGenerator } from "./pdf-generator";
+export {
+  default as ChartGenerator,
+  generateBarChart,
+  generateLineChart,
+  generatePieChart,
+  addChartToPDF,
+  type ChartData,
+  type ChartConfig,
+} from "./chart-generator";
+export {
+  generateReportPDF,
+  generateReportPDFBase64,
+  saveReportPDF,
+} from "./report-helpers";
@@ -0,0 +1,821 @@
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
+import type { UserReport } from "@fitai/shared";
+
+export class PDFGenerator {
+  private doc: jsPDF;
+  private pageWidth: number;
+  private pageHeight: number;
+  private margin: { top: number; right: number; bottom: number; left: number };
+  private currentY: number = 0;
+
+  // Theme colors (from globals.css)
+  private colors = {
+    primary: [60, 130, 225] as [number, number, number],
+    primaryDark: [40, 80, 180] as [number, number, number],
+    success: [46, 160, 67] as [number, number, number],
+    warning: [240, 185, 11] as [number, number, number],
+    destructive: [215, 50, 50] as [number, number, number],
+    text: [30, 30, 30] as [number, number, number],
+    textLight: [100, 100, 100] as [number, number, number],
+    background: [245, 245, 245] as [number, number, number],
+    white: [255, 255, 255] as [number, number, number],
+  };
+
+  constructor() {
+    this.doc = new jsPDF({
+      orientation: "portrait",
+      unit: "mm",
+      format: "a4",
+    });
+    this.pageWidth = this.doc.internal.pageSize.getWidth();
+    this.pageHeight = this.doc.internal.pageSize.getHeight();
+    this.margin = { top: 20, right: 20, bottom: 20, left: 20 };
+  }
+
+  /**
+   * Generate a complete user report PDF
+   */
+  generateUserReport(report: UserReport): jsPDF {
+    this.addHeader(report);
+    this.addUserInfo(report);
+    this.addReportPeriod(report);
+    this.addWeeklyCheckIns(report.weeklyCheckIns);
+    this.addNutritionSummary(report.nutrition);
+    this.addHydrationSummary(report.hydration);
+    this.addGoalsSummary(report.goals);
+    this.addProfileHistory(report.profileHistory);
+    this.addRecommendations(report.recommendations);
+    this.addFooter();
+
+    return this.doc;
+  }
+
+  /**
+   * Save PDF to file
+   */
+  save(filename: string): void {
+    this.doc.save(filename);
+  }
+
+  /**
+   * Get PDF as blob for API response
+   */
+  toBlob(): Blob {
+    return this.doc.output("blob");
+  }
+
+  /**
+   * Get PDF as base64 for API response
+   */
+  toBase64(): string {
+    return this.doc.output("datauristring").split(",")[1];
+  }
+
+  /**
+   * Add header with title and FitAI branding
+   */
+  private addHeader(report: UserReport): void {
+    this.currentY = this.margin.top;
+
+    // Header background
+    this.doc.setFillColor(...this.colors.primary);
+    this.doc.rect(0, 0, this.pageWidth, 35, "F");
+
+    // Title
+    this.doc.setTextColor(...this.colors.white);
+    this.doc.setFontSize(24);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("FitAI User Report", this.margin.left, 20);
+
+    // Subtitle
+    this.doc.setFontSize(10);
+    this.doc.setFont("helvetica", "normal");
+    this.doc.text(
+      `Generated: ${new Date().toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      })}`,
+      this.margin.left,
+      28,
+    );
+
+    // FitAI logo text
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("FitAI", this.pageWidth - this.margin.right - 20, 20);
+
+    this.currentY = 45;
+  }
+
+  /**
+   * Add user information section
+   */
+  private addUserInfo(report: UserReport): void {
+    this.checkPageBreak(30);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("User Information", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    const user = report.user;
+    const client = report.client;
+    const profile = report.fitnessProfile;
+
+    const userInfo = [
+      ["Name", `${user.firstName} ${user.lastName}`],
+      ["Email", user.email],
+      ["Phone", user.phone || "N/A"],
+      ["Role", user.role],
+      [
+        "Member Since",
+        user.createdAt ? new Date(user.createdAt).toLocaleDateString() : "N/A",
+      ],
+    ];
+
+    if (client) {
+      userInfo.push([
+        "Membership",
+        `${client.membershipType} - ${client.membershipStatus}`,
+      ]);
+      userInfo.push([
+        "Join Date",
+        new Date(client.joinDate).toLocaleDateString(),
+      ]);
+    }
+
+    if (profile) {
+      userInfo.push([
+        "Fitness Profile",
+        `Height: ${profile.height || "N/A"}cm, Weight: ${profile.weight || "N/A"}kg`,
+      ]);
+    }
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      body: userInfo,
+      theme: "plain",
+      margin: { left: this.margin.left, right: this.margin.right },
+      columnStyles: {
+        0: { fontStyle: "bold", cellWidth: 40, fontSize: 10 },
+        1: { cellWidth: "auto", fontSize: 10 },
+      },
+      styles: {
+        cellPadding: 3,
+        textColor: this.colors.text,
+      },
+      tableWidth: "auto" as any,
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+  }
+
+  /**
+   * Add report period section
+   */
+  private addReportPeriod(report: UserReport): void {
+    this.checkPageBreak(25);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("Report Period", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    const periodInfo = [
+      ["Start Date", report.reportPeriod.startDate],
+      ["End Date", report.reportPeriod.endDate],
+      [
+        "Duration",
+        `${Math.ceil(
+          (new Date(report.reportPeriod.endDate).getTime() -
+            new Date(report.reportPeriod.startDate).getTime()) /
+            (1000 * 60 * 60 * 24),
+        )} days`,
+      ],
+    ];
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      body: periodInfo,
+      theme: "plain",
+      margin: { left: this.margin.left, right: this.margin.right },
+      columnStyles: {
+        0: { fontStyle: "bold", cellWidth: 40, fontSize: 10 },
+        1: { cellWidth: "auto", fontSize: 10 },
+      },
+      styles: {
+        cellPadding: 3,
+        textColor: this.colors.text,
+      },
+      tableWidth: "auto" as any,
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+  }
+
+  /**
+   * Add weekly check-ins section
+   */
+  private addWeeklyCheckIns(
+    weeklyCheckIns: UserReport["weeklyCheckIns"],
+  ): void {
+    this.checkPageBreak(50);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("Weekly Check-ins", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    if (weeklyCheckIns.length === 0) {
+      this.doc.setTextColor(...this.colors.textLight);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "italic");
+      this.doc.text(
+        "No check-in data available for this period.",
+        this.margin.left,
+        this.currentY,
+      );
+      this.currentY += 15;
+      return;
+    }
+
+    const tableData = weeklyCheckIns.map((week) => [
+      week.weekStart,
+      week.weekEnd,
+      week.totalCheckIns.toString(),
+      `${week.totalTimeMinutes} min`,
+      `${week.averageDurationMinutes} min`,
+    ]);
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      head: [
+        ["Week Start", "Week End", "Check-ins", "Total Time", "Avg Duration"],
+      ],
+      body: tableData,
+      theme: "striped",
+      headStyles: {
+        fillColor: this.colors.primary,
+        textColor: this.colors.white,
+        fontStyle: "bold",
+        fontSize: 9,
+      },
+      bodyStyles: {
+        fontSize: 9,
+        textColor: this.colors.text,
+      },
+      alternateRowStyles: {
+        fillColor: [250, 250, 250],
+      },
+      margin: { left: this.margin.left, right: this.margin.right },
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+  }
+
+  /**
+   * Add nutrition summary section
+   */
+  private addNutritionSummary(nutrition: UserReport["nutrition"]): void {
+    this.checkPageBreak(60);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("Nutrition Summary", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    const summaryStats = [
+      ["Total Days Tracked", nutrition.totalDays.toString()],
+      [
+        "Average Daily Calories",
+        nutrition.averageDailyCalories.toLocaleString(),
+      ],
+      [
+        "Days Met Goal (±10%)",
+        `${nutrition.daysMetGoal} / ${nutrition.totalDays}`,
+      ],
+    ];
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      body: summaryStats,
+      theme: "plain",
+      margin: { left: this.margin.left, right: this.margin.right },
+      columnStyles: {
+        0: { fontStyle: "bold", cellWidth: 60, fontSize: 10 },
+        1: { cellWidth: "auto", fontSize: 10 },
+      },
+      styles: {
+        cellPadding: 3,
+        textColor: this.colors.text,
+      },
+      tableWidth: "auto" as any,
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 10;
+
+    // Add daily breakdown if available
+    if (
+      nutrition.dailySummaries.length > 0 &&
+      nutrition.dailySummaries.length <= 14
+    ) {
+      this.doc.setTextColor(...this.colors.textLight);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "italic");
+      this.doc.text("Daily Breakdown", this.margin.left, this.currentY);
+
+      this.currentY += 5;
+
+      const dailyData = nutrition.dailySummaries.map((day) => [
+        day.date,
+        day.totalCalories.toLocaleString(),
+        day.calorieGoal.toLocaleString(),
+        day.caloriesDelta > 0
+          ? `+${day.caloriesDelta}`
+          : day.caloriesDelta.toString(),
+        day.mealsCount.toString(),
+      ]);
+
+      autoTable(this.doc, {
+        startY: this.currentY,
+        head: [["Date", "Calories", "Goal", "Delta", "Meals"]],
+        body: dailyData,
+        theme: "striped",
+        headStyles: {
+          fillColor: this.colors.primary,
+          textColor: this.colors.white,
+          fontStyle: "bold",
+          fontSize: 8,
+        },
+        bodyStyles: {
+          fontSize: 8,
+          textColor: this.colors.text,
+        },
+        alternateRowStyles: {
+          fillColor: [250, 250, 250],
+        },
+        margin: { left: this.margin.left, right: this.margin.right },
+      });
+
+      this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+    } else if (nutrition.dailySummaries.length > 14) {
+      this.doc.setTextColor(...this.colors.textLight);
+      this.doc.setFontSize(9);
+      this.doc.text(
+        `Daily breakdown (${nutrition.dailySummaries.length} days) - See dashboard for detailed view.`,
+        this.margin.left,
+        this.currentY,
+      );
+      this.currentY += 15;
+    }
+  }
+
+  /**
+   * Add hydration summary section
+   */
+  private addHydrationSummary(hydration: UserReport["hydration"]): void {
+    this.checkPageBreak(50);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("Hydration Summary", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    const summaryStats = [
+      ["Total Days Tracked", hydration.totalDays.toString()],
+      ["Average Daily Water", `${hydration.averageDailyWater} ml`],
+      ["Days Met Goal", `${hydration.daysMetGoal} / ${hydration.totalDays}`],
+    ];
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      body: summaryStats,
+      theme: "plain",
+      margin: { left: this.margin.left, right: this.margin.right },
+      columnStyles: {
+        0: { fontStyle: "bold", cellWidth: 60, fontSize: 10 },
+        1: { cellWidth: "auto", fontSize: 10 },
+      },
+      styles: {
+        cellPadding: 3,
+        textColor: this.colors.text,
+      },
+      tableWidth: "auto" as any,
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 10;
+
+    // Add daily breakdown if available
+    if (
+      hydration.dailySummaries.length > 0 &&
+      hydration.dailySummaries.length <= 14
+    ) {
+      this.doc.setTextColor(...this.colors.textLight);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "italic");
+      this.doc.text("Daily Breakdown", this.margin.left, this.currentY);
+
+      this.currentY += 5;
+
+      const dailyData = hydration.dailySummaries.map((day) => [
+        day.date,
+        `${day.totalWater} ml`,
+        `${day.waterGoal} ml`,
+        `${day.hydrationPercentage}%`,
+      ]);
+
+      autoTable(this.doc, {
+        startY: this.currentY,
+        head: [["Date", "Total Water", "Goal", "Achievement"]],
+        body: dailyData,
+        theme: "striped",
+        headStyles: {
+          fillColor: this.colors.primary,
+          textColor: this.colors.white,
+          fontStyle: "bold",
+          fontSize: 8,
+        },
+        bodyStyles: {
+          fontSize: 8,
+          textColor: this.colors.text,
+        },
+        alternateRowStyles: {
+          fillColor: [250, 250, 250],
+        },
+        margin: { left: this.margin.left, right: this.margin.right },
+      });
+
+      this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+    } else if (hydration.dailySummaries.length > 14) {
+      this.doc.setTextColor(...this.colors.textLight);
+      this.doc.setFontSize(9);
+      this.doc.text(
+        `Daily breakdown (${hydration.dailySummaries.length} days) - See dashboard for detailed view.`,
+        this.margin.left,
+        this.currentY,
+      );
+      this.currentY += 15;
+    }
+  }
+
+  /**
+   * Add goals summary section
+   */
+  private addGoalsSummary(goals: UserReport["goals"]): void {
+    this.checkPageBreak(60);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("Fitness Goals", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    const summaryStats = [
+      ["Active Goals", goals.totalActive.toString()],
+      ["Completed Goals", goals.totalCompleted.toString()],
+      ["Average Progress", `${goals.averageProgress}%`],
+    ];
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      body: summaryStats,
+      theme: "plain",
+      margin: { left: this.margin.left, right: this.margin.right },
+      columnStyles: {
+        0: { fontStyle: "bold", cellWidth: 60, fontSize: 10 },
+        1: { cellWidth: "auto", fontSize: 10 },
+      },
+      styles: {
+        cellPadding: 3,
+        textColor: this.colors.text,
+      },
+      tableWidth: "auto" as any,
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 10;
+
+    // Add active goals
+    if (goals.active.length > 0) {
+      this.doc.setTextColor(...this.colors.success);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "bold");
+      this.doc.text("Active Goals", this.margin.left, this.currentY);
+
+      this.currentY += 5;
+
+      const activeGoals = goals.active.map((goal) => [
+        goal.title,
+        goal.goalType,
+        `${goal.progress}%`,
+        goal.priority,
+      ]);
+
+      autoTable(this.doc, {
+        startY: this.currentY,
+        head: [["Title", "Type", "Progress", "Priority"]],
+        body: activeGoals,
+        theme: "striped",
+        headStyles: {
+          fillColor: this.colors.success,
+          textColor: this.colors.white,
+          fontStyle: "bold",
+          fontSize: 8,
+        },
+        bodyStyles: {
+          fontSize: 8,
+          textColor: this.colors.text,
+        },
+        alternateRowStyles: {
+          fillColor: [250, 250, 250],
+        },
+        margin: { left: this.margin.left, right: this.margin.right },
+      });
+
+      this.currentY = (this.doc as any).lastAutoTable.finalY + 10;
+    }
+
+    // Add completed goals
+    if (goals.completed.length > 0) {
+      this.doc.setTextColor(...this.colors.primary);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "bold");
+      this.doc.text("Completed Goals", this.margin.left, this.currentY);
+
+      this.currentY += 5;
+
+      const completedGoals = goals.completed.map((goal) => [
+        goal.title,
+        goal.goalType,
+        goal.completedDate
+          ? new Date(goal.completedDate).toLocaleDateString()
+          : "N/A",
+      ]);
+
+      autoTable(this.doc, {
+        startY: this.currentY,
+        head: [["Title", "Type", "Completed Date"]],
+        body: completedGoals,
+        theme: "striped",
+        headStyles: {
+          fillColor: this.colors.primary,
+          textColor: this.colors.white,
+          fontStyle: "bold",
+          fontSize: 8,
+        },
+        bodyStyles: {
+          fontSize: 8,
+          textColor: this.colors.text,
+        },
+        alternateRowStyles: {
+          fillColor: [250, 250, 250],
+        },
+        margin: { left: this.margin.left, right: this.margin.right },
+      });
+
+      this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+    }
+  }
+
+  /**
+   * Add profile history section
+   */
+  private addProfileHistory(history: UserReport["profileHistory"]): void {
+    this.checkPageBreak(50);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("Fitness Profile Changes", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    if (history.length === 0) {
+      this.doc.setTextColor(...this.colors.textLight);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "italic");
+      this.doc.text(
+        "No profile changes recorded during this period.",
+        this.margin.left,
+        this.currentY,
+      );
+      this.currentY += 15;
+      return;
+    }
+
+    const historyData = history.map((item) => [
+      item.fieldName,
+      item.changeType,
+      item.previousValue || "N/A",
+      item.newValue || "N/A",
+      new Date(item.changedAt).toLocaleDateString(),
+    ]);
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      head: [["Field", "Change Type", "Previous", "New", "Date"]],
+      body: historyData,
+      theme: "striped",
+      headStyles: {
+        fillColor: this.colors.primary,
+        textColor: this.colors.white,
+        fontStyle: "bold",
+        fontSize: 8,
+      },
+      bodyStyles: {
+        fontSize: 8,
+        textColor: this.colors.text,
+      },
+      alternateRowStyles: {
+        fillColor: [250, 250, 250],
+      },
+      margin: { left: this.margin.left, right: this.margin.right },
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+  }
+
+  /**
+   * Add recommendations section
+   */
+  private addRecommendations(
+    recommendations: UserReport["recommendations"],
+  ): void {
+    this.checkPageBreak(60);
+
+    this.doc.setTextColor(...this.colors.primary);
+    this.doc.setFontSize(14);
+    this.doc.setFont("helvetica", "bold");
+    this.doc.text("AI Recommendations", this.margin.left, this.currentY);
+
+    this.currentY += 8;
+
+    const summaryStats = [
+      ["Accepted", recommendations.totalAccepted.toString()],
+      ["Rejected", recommendations.totalRejected.toString()],
+      ["Pending", recommendations.totalPending.toString()],
+    ];
+
+    autoTable(this.doc, {
+      startY: this.currentY,
+      body: summaryStats,
+      theme: "plain",
+      margin: { left: this.margin.left, right: this.margin.right },
+      columnStyles: {
+        0: { fontStyle: "bold", cellWidth: 60, fontSize: 10 },
+        1: { cellWidth: "auto", fontSize: 10 },
+      },
+      styles: {
+        cellPadding: 3,
+        textColor: this.colors.text,
+      },
+      tableWidth: "auto" as any,
+    });
+
+    this.currentY = (this.doc as any).lastAutoTable.finalY + 10;
+
+    // Add accepted recommendations
+    if (recommendations.accepted.length > 0) {
+      this.doc.setTextColor(...this.colors.success);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "bold");
+      this.doc.text(
+        "Accepted Recommendations",
+        this.margin.left,
+        this.currentY,
+      );
+
+      this.currentY += 5;
+
+      const acceptedRecs = recommendations.accepted.map((rec) => [
+        rec.recommendationText.substring(0, 80) +
+          (rec.recommendationText.length > 80 ? "..." : ""),
+        new Date(rec.generatedAt).toLocaleDateString(),
+      ]);
+
+      autoTable(this.doc, {
+        startY: this.currentY,
+        head: [["Recommendation", "Generated"]],
+        body: acceptedRecs,
+        theme: "striped",
+        headStyles: {
+          fillColor: this.colors.success,
+          textColor: this.colors.white,
+          fontStyle: "bold",
+          fontSize: 8,
+        },
+        bodyStyles: {
+          fontSize: 8,
+          textColor: this.colors.text,
+        },
+        alternateRowStyles: {
+          fillColor: [250, 250, 250],
+        },
+        margin: { left: this.margin.left, right: this.margin.right },
+      });
+
+      this.currentY = (this.doc as any).lastAutoTable.finalY + 10;
+    }
+
+    // Add pending recommendations
+    if (recommendations.pending.length > 0) {
+      this.doc.setTextColor(...this.colors.warning);
+      this.doc.setFontSize(10);
+      this.doc.setFont("helvetica", "bold");
+      this.doc.text("Pending Recommendations", this.margin.left, this.currentY);
+
+      this.currentY += 5;
+
+      const pendingRecs = recommendations.pending.map((rec) => [
+        rec.recommendationText.substring(0, 80) +
+          (rec.recommendationText.length > 80 ? "..." : ""),
+        new Date(rec.generatedAt).toLocaleDateString(),
+      ]);
+
+      autoTable(this.doc, {
+        startY: this.currentY,
+        head: [["Recommendation", "Generated"]],
+        body: pendingRecs,
+        theme: "striped",
+        headStyles: {
+          fillColor: this.colors.warning,
+          textColor: this.colors.text,
+          fontStyle: "bold",
+          fontSize: 8,
+        },
+        bodyStyles: {
+          fontSize: 8,
+          textColor: this.colors.text,
+        },
+        alternateRowStyles: {
+          fillColor: [250, 250, 250],
+        },
+        margin: { left: this.margin.left, right: this.margin.right },
+      });
+
+      this.currentY = (this.doc as any).lastAutoTable.finalY + 15;
+    }
+  }
+
+  /**
+   * Add footer to each page
+   */
+  private addFooter(): void {
+    const pageCount = this.doc.getNumberOfPages();
+
+    for (let i = 1; i <= pageCount; i++) {
+      this.doc.setPage(i);
+
+      // Footer line
+      this.doc.setDrawColor(...this.colors.primary);
+      this.doc.setLineWidth(0.5);
+      this.doc.line(
+        this.margin.left,
+        this.pageHeight - 15,
+        this.pageWidth - this.margin.right,
+        this.pageHeight - 15,
+      );
+
+      // Footer text
+      this.doc.setTextColor(...this.colors.textLight);
+      this.doc.setFontSize(8);
+      this.doc.setFont("helvetica", "normal");
+      this.doc.text(
+        `FitAI User Report - Page ${i} of ${pageCount}`,
+        this.margin.left,
+        this.pageHeight - 10,
+      );
+      this.doc.text(
+        "Generated by FitAI",
+        this.pageWidth - this.margin.right - 30,
+        this.pageHeight - 10,
+      );
+    }
+  }
+
+  /**
+   * Check if we need a page break
+   */
+  private checkPageBreak(requiredSpace: number): void {
+    if (this.currentY + requiredSpace > this.pageHeight - this.margin.bottom) {
+      this.doc.addPage();
+      this.currentY = this.margin.top;
+    }
+  }
+}
+
+export default PDFGenerator;
@@ -0,0 +1,35 @@
+import type { UserReport } from "@fitai/shared";
+import PDFGenerator from "./pdf-generator";
+
+/**
+ * Generate a PDF report from a UserReport object
+ */
+export function generateReportPDF(report: UserReport): Blob {
+  const generator = new PDFGenerator();
+  generator.generateUserReport(report);
+  return generator.toBlob();
+}
+
+/**
+ * Generate a PDF report and return as base64 string
+ */
+export function generateReportPDFBase64(report: UserReport): string {
+  const generator = new PDFGenerator();
+  generator.generateUserReport(report);
+  return generator.toBase64();
+}
+
+/**
+ * Generate a PDF report and save to file
+ */
+export function saveReportPDF(report: UserReport, filename: string): void {
+  const generator = new PDFGenerator();
+  generator.generateUserReport(report);
+  generator.save(filename);
+}
+
+export default {
+  generateReportPDF,
+  generateReportPDFBase64,
+  saveReportPDF,
+};
@@ -0,0 +1,153 @@
+/**
+ * ISO Week Calculation Utilities
+ *
+ * Helper functions for ISO 8601 week calculations
+ * Week starts on Monday and ends on Sunday
+ */
+
+/**
+ * Get the Monday of the ISO week for a given date
+ */
+export function getWeekStart(date: Date): Date {
+  const d = new Date(date);
+  const day = d.getDay();
+  const diff = d.getDate() - day + (day === 0 ? -6 : 1);
+  d.setDate(diff);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+/**
+ * Get the Sunday of the ISO week for a given date
+ */
+export function getWeekEnd(date: Date): Date {
+  const monday = getWeekStart(date);
+  const sunday = new Date(monday);
+  sunday.setDate(sunday.getDate() + 6);
+  sunday.setHours(23, 59, 59, 999);
+  return sunday;
+}
+
+/**
+ * Get ISO week number (1-53)
+ */
+export function getISOWeek(date: Date): number {
+  const d = new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()),
+  );
+  const dayNum = d.getUTCDay() || 7;
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+
+/**
+ * Format date as YYYY-MM-DD
+ */
+export function formatDate(date: Date): string {
+  return date.toISOString().split("T")[0];
+}
+
+/**
+ * Get all weeks in a date range
+ */
+export function getWeeksInRange(
+  startDate: string,
+  endDate: string,
+): Array<{
+  weekStart: string;
+  weekEnd: string;
+  weekNumber: number;
+}> {
+  const weeks: Array<{
+    weekStart: string;
+    weekEnd: string;
+    weekNumber: number;
+  }> = [];
+
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const current = getWeekStart(start);
+
+  while (current <= end) {
+    const weekStart = getWeekStart(current);
+    const weekEnd = getWeekEnd(current);
+
+    weeks.push({
+      weekStart: formatDate(weekStart),
+      weekEnd: formatDate(weekEnd),
+      weekNumber: getISOWeek(current),
+    });
+
+    current.setDate(current.getDate() + 7);
+  }
+
+  return weeks;
+}
+
+/**
+ * Test ISO week calculations
+ */
+export function testISOWeekCalculations(): void {
+  console.log("ISO Week Calculation Tests\n");
+
+  const testDates = [
+    {
+      date: "2024-01-01",
+      expected: { monday: "2024-01-01", sunday: "2024-01-07", week: 1 },
+    },
+    {
+      date: "2024-01-02",
+      expected: { monday: "2024-01-01", sunday: "2024-01-07", week: 1 },
+    },
+    {
+      date: "2024-01-07",
+      expected: { monday: "2024-01-01", sunday: "2024-01-07", week: 1 },
+    },
+    {
+      date: "2024-01-08",
+      expected: { monday: "2024-01-08", sunday: "2024-01-14", week: 2 },
+    },
+    {
+      date: "2024-12-31",
+      expected: { monday: "2024-12-30", sunday: "2025-01-05", week: 1 },
+    }, // Week 1 of 2025
+  ];
+
+  testDates.forEach(({ date, expected }) => {
+    const d = new Date(date);
+    const monday = formatDate(getWeekStart(d));
+    const sunday = formatDate(getWeekEnd(d));
+    const week = getISOWeek(d);
+
+    const mondayMatch = monday === expected.monday;
+    const sundayMatch = sunday === expected.sunday;
+    const weekMatch = week === expected.week;
+
+    console.log(`Date: ${date}`);
+    console.log(
+      `  Monday: ${monday} ${mondayMatch ? "✓" : "✗ (expected: " + expected.monday + ")"}`,
+    );
+    console.log(
+      `  Sunday: ${sunday} ${sundayMatch ? "✓" : "✗ (expected: " + expected.sunday + ")"}`,
+    );
+    console.log(
+      `  Week: ${week} ${weekMatch ? "✓" : "✗ (expected: " + expected.week + ")"}`,
+    );
+    console.log();
+  });
+}
+
+// Run tests if executed directly
+if (typeof require !== "undefined" && require.main === module) {
+  testISOWeekCalculations();
+}
+
+export default {
+  getWeekStart,
+  getWeekEnd,
+  getISOWeek,
+  formatDate,
+  getWeeksInRange,
+  testISOWeekCalculations,
+};
@@ -15,8 +15,13 @@ export const passwordSchema = z

 export const phoneSchema = z
  .string()
-  .regex(/^\+?[1-9]\d{1,14}$/, "Invalid phone number format")
-  .optional();
+  .optional()
+  .refine(
+    (val) => !val || val.trim() === "" || /^\+?[1-9]\d{1,14}$/.test(val),
+    {
+      message: "Invalid phone number format",
+    },
+  );

 export const dateTimeSchema = z.string().datetime("Invalid datetime format");

@@ -31,6 +36,14 @@ export const userRoleSchema = z.enum([
  "superAdmin",
 ]);

+export const membershipTypeSchema = z.enum(["basic", "premium", "vip"]);
+
+export const membershipStatusSchema = z.enum([
+  "active",
+  "inactive",
+  "suspended",
+]);
+
 export const userSchema = z.object({
  email: emailSchema,
  password: passwordSchema,
@@ -63,6 +76,8 @@ export const userUpdateWithIdSchema = z.object({
  role: userRoleSchema.optional(),
  phone: phoneSchema,
  gymId: z.string().nullable().optional(),
+  membershipType: membershipTypeSchema.optional(),
+  membershipStatus: membershipStatusSchema.optional(),
 });

 // ============================================================================
@@ -333,6 +348,8 @@ export type User = z.infer<typeof userSchema>;
 export type UserUpdate = z.infer<typeof userUpdateSchema>;
 export type UserLogin = z.infer<typeof userLoginSchema>;
 export type UserRole = z.infer<typeof userRoleSchema>;
+export type MembershipType = z.infer<typeof membershipTypeSchema>;
+export type MembershipStatus = z.infer<typeof membershipStatusSchema>;

 export type FitnessGoal = z.infer<typeof fitnessGoalSchema>;
 export type FitnessGoalUpdate = z.infer<typeof fitnessGoalUpdateSchema>;
@@ -0,0 +1,79 @@
+import { apiClient } from "./client";
+import { API_ENDPOINTS } from "../config/api";
+
+/**
+ * Hydration data types
+ */
+export interface HydrationEntry {
+  id?: string;
+  date: string; // YYYY-MM-DD
+  totalWater: number; // ml
+  waterGoal: number; // ml
+  entries?: Array<{
+    amount: number; // ml
+    time: string;
+  }>;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+/**
+ * Save or update daily hydration
+ */
+export async function saveDailyHydration(
+  data: {
+    date: string;
+    totalWater?: number;
+    waterGoal?: number;
+    entries?: HydrationEntry["entries"];
+  },
+  token?: string | null,
+): Promise<HydrationEntry> {
+  const response = await apiClient.post<{
+    success: boolean;
+    data: { hydration: HydrationEntry };
+  }>(API_ENDPOINTS.HYDRATION.BASE, data, {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  return response.data.data.hydration;
+}
+
+/**
+ * Get hydration for a specific date
+ */
+export async function getHydrationByDate(
+  date: string,
+  token?: string | null,
+): Promise<HydrationEntry | null> {
+  try {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: HydrationEntry | null;
+    }>(API_ENDPOINTS.HYDRATION.GET_BY_DATE(date), {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    });
+    return response.data.data;
+  } catch (error: any) {
+    if (error.response?.status === 404) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Get hydration for a date range
+ */
+export async function getHydrationByRange(
+  startDate: string,
+  endDate: string,
+  token?: string | null,
+): Promise<HydrationEntry[]> {
+  const response = await apiClient.get<{
+    success: boolean;
+    data: HydrationEntry[];
+  }>(API_ENDPOINTS.HYDRATION.GET_RANGE(startDate, endDate), {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  return response.data.data || [];
+}
@@ -10,4 +10,6 @@ export * from "./statistics";
 export * from "./fitnessProfile";
 export * from "./attendance";
 export * from "./recommendations";
+export * from "./nutrition";
+export * from "./hydration";
 export * from "./client";
@@ -0,0 +1,146 @@
+import { apiClient } from "./client";
+import { API_ENDPOINTS } from "../config/api";
+
+/**
+ * Nutrition data types
+ */
+export interface NutritionEntry {
+  id?: string;
+  date: string; // YYYY-MM-DD
+  totalCalories: number;
+  calorieGoal: number;
+  meals?: Array<{
+    type: "breakfast" | "lunch" | "dinner" | "snack";
+    name: string;
+    calories: number;
+    time?: string;
+  }>;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface MealEntry {
+  id?: string;
+  dailyNutritionId?: string;
+  mealType: "breakfast" | "lunch" | "dinner" | "snack";
+  foodName: string;
+  calories: number;
+  protein?: number;
+  carbs?: number;
+  fats?: number;
+  timestamp?: string;
+  createdAt?: string;
+}
+
+/**
+ * Save or update daily nutrition
+ */
+export async function saveDailyNutrition(
+  data: {
+    date: string;
+    totalCalories?: number;
+    calorieGoal?: number;
+    meals?: NutritionEntry["meals"];
+  },
+  token?: string | null,
+): Promise<NutritionEntry> {
+  const response = await apiClient.post<{
+    success: boolean;
+    data: { nutrition: NutritionEntry };
+  }>(API_ENDPOINTS.NUTRITION.BASE, data, {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  return response.data.data.nutrition;
+}
+
+/**
+ * Get nutrition for a specific date
+ */
+export async function getNutritionByDate(
+  date: string,
+  token?: string | null,
+): Promise<NutritionEntry | null> {
+  try {
+    const response = await apiClient.get<{
+      success: boolean;
+      data: NutritionEntry | null;
+    }>(API_ENDPOINTS.NUTRITION.GET_BY_DATE(date), {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+    });
+    return response.data.data;
+  } catch (error: any) {
+    if (error.response?.status === 404) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+/**
+ * Get nutrition for a date range
+ */
+export async function getNutritionByRange(
+  startDate: string,
+  endDate: string,
+  token?: string | null,
+): Promise<NutritionEntry[]> {
+  const response = await apiClient.get<{
+    success: boolean;
+    data: NutritionEntry[];
+  }>(API_ENDPOINTS.NUTRITION.GET_RANGE(startDate, endDate), {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  return response.data.data || [];
+}
+
+/**
+ * Add a meal entry
+ */
+export async function addMealEntry(
+  data: {
+    mealType: MealEntry["mealType"];
+    foodName: string;
+    calories: number;
+    protein?: number;
+    carbs?: number;
+    fats?: number;
+    dailyNutritionId?: string;
+  },
+  token?: string | null,
+): Promise<MealEntry> {
+  const response = await apiClient.post<{
+    success: boolean;
+    data: MealEntry;
+  }>(API_ENDPOINTS.NUTRITION.MEALS, data, {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  return response.data.data;
+}
+
+/**
+ * Get meal entries for a specific date
+ */
+export async function getMealEntriesByDate(
+  date: string,
+  token?: string | null,
+): Promise<MealEntry[]> {
+  const response = await apiClient.get<{
+    success: boolean;
+    data: MealEntry[];
+  }>(`${API_ENDPOINTS.NUTRITION.MEALS}?date=${date}`, {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+  return response.data.data || [];
+}
+
+/**
+ * Delete a meal entry
+ */
+export async function deleteMealEntry(
+  id: string,
+  token?: string | null,
+): Promise<void> {
+  await apiClient.delete(`${API_ENDPOINTS.NUTRITION.MEALS}?id=${id}`, {
+    headers: token ? { Authorization: `Bearer ${token}` } : {},
+  });
+}
@@ -96,9 +96,13 @@ export default function OnboardingScreen() {

      const fitnessData = {
        userId: user.id,
-        height: parseFloat(fitnessProfile.height),
-        weight: parseFloat(fitnessProfile.weight),
-        age: parseInt(fitnessProfile.age),
+        height: fitnessProfile.height
+          ? parseFloat(fitnessProfile.height)
+          : undefined,
+        weight: fitnessProfile.weight
+          ? parseFloat(fitnessProfile.weight)
+          : undefined,
+        age: fitnessProfile.age ? parseInt(fitnessProfile.age, 10) : undefined,
        fitnessGoals: fitnessProfile.goals ? [fitnessProfile.goals] : [],
        medicalConditions: fitnessProfile.medicalConditions || undefined,
        allergies: fitnessProfile.dietaryRestrictions || undefined,
@@ -103,20 +103,22 @@ export default function AttendanceScreen() {
    >
      {/* Header */}
      <View style={styles.header}>
-        <Text style={[typography.h1, { color: colors.textPrimary }]}>
-          📍 Attendance
+        <Text
+          style={[typography.h1, { color: colors.textPrimary, fontSize: 32 }]}
+        >
+          Attendance
        </Text>
        <Text
          style={[
            typography.body,
-            { color: colors.textSecondary, marginTop: 4 },
+            { color: colors.textSecondary, marginTop: 8 },
          ]}
        >
          {activeCheckIn
-            ? "You're crushing it today! 💪"
+            ? "You're crushing it today!"
            : history.length === 0
-              ? "Ready to start your fitness journey? 🚀"
-              : "Track your gym visits and build streaks! 🔥"}
+              ? "Ready to start your fitness journey?"
+              : "Track your gym visits and build streaks!"}
        </Text>
      </View>

@@ -150,21 +150,26 @@ export default function GoalsScreen() {
      >
        {/* Header */}
        <View style={styles.header}>
-          <View>
-            <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              🎯 Fitness Goals
+          <View style={{ flex: 1 }}>
+            <Text
+              style={[
+                typography.h1,
+                { color: colors.textPrimary, fontSize: 32 },
+              ]}
+            >
+              Goals
            </Text>
            <Text
              style={[
                typography.body,
-                { color: colors.textSecondary, marginTop: 4 },
+                { color: colors.textSecondary, marginTop: 8 },
              ]}
            >
              {activeGoals.length === 0
-                ? "Ready to crush some goals? 💪"
+                ? "Ready to crush some goals?"
                : activeGoals.length === 1
-                  ? "You're on a mission! Keep it up! 🚀"
-                  : `${activeGoals.length} goals in progress. Legend! ⭐`}
+                  ? "You're on a mission! Keep it up!"
+                  : `${activeGoals.length} goals in progress. Let's go!`}
            </Text>
          </View>
          <TouchableOpacity
@@ -183,45 +188,69 @@ export default function GoalsScreen() {
        {goals && goals.length > 0 && (
          <View style={styles.section}>
            <View style={styles.statsRow}>
-              <MinimalCard variant="bordered" style={styles.statCard}>
-                <Text style={[typography.stat, { color: colors.primary }]}>
+              <MinimalCard
+                variant="elevated"
+                style={[styles.statCard, { backgroundColor: colors.primary }]}
+              >
+                <Text
+                  style={[
+                    typography.statLarge,
+                    { color: colors.white, fontSize: 36 },
+                  ]}
+                >
                  {activeGoals.length}
                </Text>
                <Text
                  style={[
-                    typography.caption,
-                    { color: colors.textTertiary, marginTop: 4 },
+                    typography.label,
+                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
                  ]}
                >
-                  🎯 Active
+                  ACTIVE
                </Text>
              </MinimalCard>

-              <MinimalCard variant="bordered" style={styles.statCard}>
-                <Text style={[typography.stat, { color: colors.success }]}>
+              <MinimalCard
+                variant="elevated"
+                style={[styles.statCard, { backgroundColor: colors.success }]}
+              >
+                <Text
+                  style={[
+                    typography.statLarge,
+                    { color: colors.white, fontSize: 36 },
+                  ]}
+                >
                  {completedGoals.length}
                </Text>
                <Text
                  style={[
-                    typography.caption,
-                    { color: colors.textTertiary, marginTop: 4 },
+                    typography.label,
+                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
                  ]}
                >
-                  {completedGoals.length >= 5 ? "🏆" : "✅"} Completed
+                  COMPLETED
                </Text>
              </MinimalCard>

-              <MinimalCard variant="bordered" style={styles.statCard}>
-                <Text style={[typography.stat, { color: colors.textPrimary }]}>
+              <MinimalCard
+                variant="elevated"
+                style={[styles.statCard, { backgroundColor: colors.accent }]}
+              >
+                <Text
+                  style={[
+                    typography.statLarge,
+                    { color: colors.white, fontSize: 36 },
+                  ]}
+                >
                  {avgProgress}%
                </Text>
                <Text
                  style={[
-                    typography.caption,
-                    { color: colors.textTertiary, marginTop: 4 },
+                    typography.label,
+                    { color: "rgba(255,255,255,0.8)", marginTop: 4 },
                  ]}
                >
-                  {avgProgress >= 75 ? "🔥" : "📊"} Progress
+                  PROGRESS
                </Text>
              </MinimalCard>
            </View>
@@ -229,66 +258,104 @@ export default function GoalsScreen() {
        )}

        {/* Analytics Section */}
-        {statistics && (
-          <View style={styles.section}>
-            <MinimalCard variant="default">
+        {statistics &&
+          (statistics.weeklyTrend.length > 0 ||
+            statistics.goals.goalsByType.length > 0) && (
+            <View style={styles.section}>
              <TouchableOpacity
-                style={styles.analyticsHeader}
                onPress={() => setShowAnalytics(!showAnalytics)}
-                activeOpacity={0.7}
+                activeOpacity={0.85}
              >
-                <View style={styles.analyticsHeaderLeft}>
-                  <Ionicons
-                    name="bar-chart-outline"
-                    size={20}
-                    color={colors.primary}
-                  />
-                  <Text
-                    style={[
-                      typography.h3,
-                      { color: colors.textPrimary, marginLeft: 8 },
-                    ]}
-                  >
-                    📈 Progress Analytics
-                  </Text>
-                </View>
-                <Ionicons
-                  name={showAnalytics ? "chevron-up" : "chevron-down"}
-                  size={20}
-                  color={colors.textTertiary}
-                />
-              </TouchableOpacity>
+                <MinimalCard variant="elevated" style={styles.analyticsCard}>
+                  <View style={styles.analyticsHeader}>
+                    <View style={styles.analyticsHeaderLeft}>
+                      <View
+                        style={[
+                          styles.analyticsIcon,
+                          { backgroundColor: `${colors.primary}15` },
+                        ]}
+                      >
+                        <Ionicons
+                          name="bar-chart"
+                          size={24}
+                          color={colors.primary}
+                        />
+                      </View>
+                      <View>
+                        <Text
+                          style={[typography.h3, { color: colors.textPrimary }]}
+                        >
+                          Progress Analytics
+                        </Text>
+                        <Text
+                          style={[
+                            typography.caption,
+                            { color: colors.textTertiary, marginTop: 2 },
+                          ]}
+                        >
+                          {showAnalytics ? "Tap to collapse" : "Tap to expand"}
+                        </Text>
+                      </View>
+                    </View>
+                    <View
+                      style={[
+                        styles.analyticsToggle,
+                        { backgroundColor: colors.surfaceElevated },
+                      ]}
+                    >
+                      <Ionicons
+                        name={showAnalytics ? "chevron-up" : "chevron-down"}
+                        size={20}
+                        color={colors.textSecondary}
+                      />
+                    </View>
+                  </View>

-              {showAnalytics && (
-                <View
-                  style={[
-                    styles.analyticsContent,
-                    { borderTopColor: colors.border },
-                  ]}
-                >
-                  {statistics.weeklyTrend.length > 0 && (
-                    <WeeklyProgressChart
-                      weeklyData={statistics.weeklyTrend}
-                      title="8-Week Trend"
-                    />
+                  {showAnalytics && (
+                    <View style={styles.analyticsContent}>
+                      {statistics.weeklyTrend.length > 0 && (
+                        <View style={styles.chartSection}>
+                          <Text
+                            style={[
+                              typography.h4,
+                              { color: colors.textPrimary, marginBottom: 16 },
+                            ]}
+                          >
+                            Weekly Trend
+                          </Text>
+                          <WeeklyProgressChart
+                            weeklyData={statistics.weeklyTrend}
+                          />
+                        </View>
+                      )}
+                      {statistics.goals.goalsByType.length > 0 && (
+                        <View style={styles.chartSection}>
+                          <Text
+                            style={[
+                              typography.h4,
+                              { color: colors.textPrimary, marginBottom: 16 },
+                            ]}
+                          >
+                            Goals by Type
+                          </Text>
+                          <GoalTypeBreakdownChart
+                            data={statistics.goals.goalsByType}
+                          />
+                        </View>
+                      )}
+                    </View>
                  )}
-                  {statistics.goals.goalsByType.length > 0 && (
-                    <GoalTypeBreakdownChart
-                      data={statistics.goals.goalsByType}
-                      title="Goals by Type"
-                    />
-                  )}
-                </View>
-              )}
-            </MinimalCard>
-          </View>
-        )}
+                </MinimalCard>
+              </TouchableOpacity>
+            </View>
+          )}

        {/* Active Goals */}
        <View style={styles.section}>
          <SectionHeader
-            title={`🚀 Active Goals (${activeGoals.length})`}
-            actionLabel="Add New"
+            title={`Active Goals (${activeGoals.length})`}
+            subtitle="Keep pushing forward!"
+            actionLabel="+ Add New"
            onActionPress={() => setIsModalVisible(true)}
          />
          {activeGoals.length === 0 ? (
@@ -331,7 +398,8 @@ export default function GoalsScreen() {
        {completedGoals.length > 0 && (
          <View style={styles.section}>
            <SectionHeader
-              title={`✨ Completed Goals (${completedGoals.length})`}
+              title={`Completed (${completedGoals.length})`}
+              subtitle="Great work!"
            />
            <View style={styles.goalsList}>
              {completedGoals.map((goal) => (
@@ -386,15 +454,15 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
-    paddingHorizontal: 24,
+    paddingHorizontal: 20,
    paddingTop: 60,
-    paddingBottom: 24,
+    paddingBottom: 20,
  },
  debugButton: {
    padding: 8,
  },
  section: {
-    paddingHorizontal: 24,
+    paddingHorizontal: 20,
    marginBottom: 24,
  },
  statsRow: {
@@ -405,8 +473,12 @@ const styles = StyleSheet.create({
    flex: 1,
    alignItems: "center",
    paddingVertical: 20,
+    paddingHorizontal: 12,
    borderRadius: 20,
  },
+  analyticsCard: {
+    padding: 20,
+  },
  analyticsHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
@@ -416,13 +488,32 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    alignItems: "center",
  },
+  analyticsIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 14,
+  },
+  analyticsToggle: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
  analyticsContent: {
-    paddingTop: 16,
-    marginTop: 16,
+    paddingTop: 24,
+    marginTop: 20,
    borderTopWidth: 1,
+    borderTopColor: "rgba(0,0,0,0.05)",
+  },
+  chartSection: {
+    marginBottom: 20,
  },
  goalsList: {
-    gap: 12,
+    gap: 16,
  },
  emptyState: {
    alignItems: "center",
@@ -433,18 +524,18 @@ const styles = StyleSheet.create({
  },
  fabContainer: {
    position: "absolute",
-    right: 24,
+    right: 20,
    bottom: 90,
  },
  fab: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
+    width: 64,
+    height: 64,
+    borderRadius: 22,
    justifyContent: "center",
    alignItems: "center",
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 8,
-    elevation: 4,
+    shadowOffset: { width: 0, height: 6 },
+    shadowOpacity: 0.35,
+    shadowRadius: 12,
+    elevation: 8,
  },
 });
@@ -19,6 +19,7 @@ import { MinimalButton } from "../../components/MinimalButton";
 import { Badge } from "../../components/Badge";
 import { IconContainer } from "../../components/IconContainer";
 import { API_BASE_URL, API_ENDPOINTS } from "../../config/api";
+import { fitnessProfileApi, FitnessProfile } from "../../api/fitnessProfile";
 import log from "../../utils/logger";

 export default function ProfileScreen() {
@@ -35,6 +36,11 @@ export default function ProfileScreen() {
  const [selectedGymId, setSelectedGymId] = useState<string | null>(null);
  const [currentGymId, setCurrentGymId] = useState<string | null>(null);
  const [currentGymName, setCurrentGymName] = useState<string | null>(null);
+  const [showGymDropdown, setShowGymDropdown] = useState(false);
+  const [fitnessProfile, setFitnessProfile] = useState<FitnessProfile | null>(
+    null,
+  );
+  const [profileLoading, setProfileLoading] = useState(false);

  useEffect(() => {
    const gid =
@@ -49,8 +55,23 @@ export default function ProfileScreen() {

  useEffect(() => {
    loadGyms();
+    loadFitnessProfile();
  }, []);

+  const loadFitnessProfile = async () => {
+    try {
+      setProfileLoading(true);
+      const token = await getToken();
+      if (!token) return;
+      const profile = await fitnessProfileApi.getFitnessProfile(token);
+      setFitnessProfile(profile);
+    } catch (error) {
+      log.error("Failed to load fitness profile", error);
+    } finally {
+      setProfileLoading(false);
+    }
+  };
+
  const loadGyms = async () => {
    try {
      setGymsLoading(true);
@@ -115,8 +136,12 @@ export default function ProfileScreen() {
  const handleApplyGym = async () => {
    try {
      const token = await getToken();
-      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS}/gym`;
-      log.debug("Updating gym selection", { url, gymId: selectedGymId });
+      const url = `${API_BASE_URL}${API_ENDPOINTS.USERS.GYM}`;
+      log.debug("Updating gym selection", {
+        url,
+        gymId: selectedGymId,
+        token: token ? "present" : "missing",
+      });
      const res = await fetch(url, {
        method: "PATCH",
        headers: {
@@ -213,7 +238,10 @@ export default function ProfileScreen() {
      contentContainerStyle={styles.content}
    >
      {/* Header Card */}
-      <MinimalCard variant="elevated" style={styles.profileCard}>
+      <MinimalCard
+        variant="elevated"
+        style={[styles.profileCard, { backgroundColor: colors.primary }]}
+      >
        <View style={styles.avatarContainer}>
          {user?.imageUrl ? (
            <Image source={{ uri: user.imageUrl }} style={styles.avatar} />
@@ -221,29 +249,36 @@ export default function ProfileScreen() {
            <View
              style={[
                styles.placeholderAvatar,
-                { backgroundColor: colors.primary },
+                {
+                  backgroundColor: colors.white,
+                  borderWidth: 3,
+                  borderColor: colors.white,
+                },
              ]}
            >
-              <Ionicons name="person" size={40} color={colors.white} />
+              <Ionicons name="person" size={40} color={colors.primary} />
            </View>
          )}
        </View>
        <Text
-          style={[typography.h2, { color: colors.textPrimary, marginTop: 16 }]}
+          style={[
+            typography.h1,
+            { color: colors.white, marginTop: 16, fontSize: 28 },
+          ]}
        >
          {user?.fullName || "User"}
        </Text>
        <Text
          style={[
            typography.body,
-            { color: colors.textSecondary, marginTop: 4 },
+            { color: "rgba(255,255,255,0.8)", marginTop: 4 },
          ]}
        >
          {user?.primaryEmailAddress?.emailAddress}
        </Text>
        <Badge
          label="Premium Member"
-          variant="primary"
+          variant="success"
          style={{ marginTop: 12 }}
        />
      </MinimalCard>
@@ -321,29 +356,145 @@ export default function ProfileScreen() {
            onPress={() => router.push("/personal-details")}
          />
          <View style={[styles.divider, { backgroundColor: colors.border }]} />
-          <ListItem
-            title="Fitness Profile"
-            leftIcon={
-              <IconContainer
-                variant="colored"
-                backgroundColor={`${colors.success}20`}
-              >
-                <Ionicons
-                  name="fitness-outline"
-                  size={20}
-                  color={colors.success}
-                />
-              </IconContainer>
-            }
-            rightElement={
-              <Ionicons
-                name="chevron-forward"
-                size={20}
-                color={colors.textTertiary}
-              />
-            }
+
+          {/* Fitness Profile Card */}
+          <TouchableOpacity
            onPress={() => router.push("/fitness-profile")}
-          />
+            activeOpacity={0.85}
+          >
+            <MinimalCard variant="elevated" style={styles.fitnessProfileCard}>
+              <View style={styles.fitnessProfileHeader}>
+                <View
+                  style={[
+                    styles.fitnessProfileIcon,
+                    { backgroundColor: colors.success },
+                  ]}
+                >
+                  <Ionicons name="fitness" size={24} color={colors.white} />
+                </View>
+                <View style={{ flex: 1, marginLeft: 14 }}>
+                  <Text style={[typography.h4, { color: colors.textPrimary }]}>
+                    Fitness Profile
+                  </Text>
+                  <Text
+                    style={[
+                      typography.caption,
+                      { color: colors.textTertiary, marginTop: 2 },
+                    ]}
+                  >
+                    {fitnessProfile ? "Tap to edit" : "Set up your profile"}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    styles.editButton,
+                    { backgroundColor: colors.primary },
+                  ]}
+                >
+                  <Ionicons name="pencil" size={16} color={colors.white} />
+                </View>
+              </View>
+
+              {profileLoading ? (
+                <View style={styles.profileLoading}>
+                  <ActivityIndicator color={colors.primary} />
+                </View>
+              ) : fitnessProfile ? (
+                <View
+                  style={[
+                    styles.fitnessProfileStats,
+                    { borderTopColor: colors.border },
+                  ]}
+                >
+                  <View style={styles.profileStat}>
+                    <Text
+                      style={[
+                        typography.statLarge,
+                        { color: colors.primary, fontSize: 28 },
+                      ]}
+                    >
+                      {fitnessProfile.height || "-"}
+                    </Text>
+                    <Text
+                      style={[
+                        typography.caption,
+                        { color: colors.textTertiary },
+                      ]}
+                    >
+                      Height (cm)
+                    </Text>
+                  </View>
+                  <View
+                    style={[
+                      styles.profileStatDivider,
+                      { backgroundColor: colors.border },
+                    ]}
+                  />
+                  <View style={styles.profileStat}>
+                    <Text
+                      style={[
+                        typography.statLarge,
+                        { color: colors.success, fontSize: 28 },
+                      ]}
+                    >
+                      {fitnessProfile.weight || "-"}
+                    </Text>
+                    <Text
+                      style={[
+                        typography.caption,
+                        { color: colors.textTertiary },
+                      ]}
+                    >
+                      Weight (kg)
+                    </Text>
+                  </View>
+                  <View
+                    style={[
+                      styles.profileStatDivider,
+                      { backgroundColor: colors.border },
+                    ]}
+                  />
+                  <View style={styles.profileStat}>
+                    <Text
+                      style={[
+                        typography.statLarge,
+                        { color: colors.warning, fontSize: 28 },
+                      ]}
+                    >
+                      {fitnessProfile.age || "-"}
+                    </Text>
+                    <Text
+                      style={[
+                        typography.caption,
+                        { color: colors.textTertiary },
+                      ]}
+                    >
+                      Age
+                    </Text>
+                  </View>
+                </View>
+              ) : (
+                <View
+                  style={[styles.noProfile, { borderTopColor: colors.border }]}
+                >
+                  <Text
+                    style={[typography.body, { color: colors.textSecondary }]}
+                  >
+                    Complete your fitness profile to get personalized
+                    recommendations
+                  </Text>
+                  <MinimalButton
+                    title="Set Up Profile"
+                    variant="primary"
+                    size="sm"
+                    style={{ marginTop: 12 }}
+                    onPress={() => router.push("/fitness-profile")}
+                  />
+                </View>
+              )}
+            </MinimalCard>
+          </TouchableOpacity>
+
          <View style={[styles.divider, { backgroundColor: colors.border }]} />
          <ListItem
            title="Notifications"
@@ -372,65 +523,71 @@ export default function ProfileScreen() {

      {/* Gym Selection */}
      <View style={styles.section}>
-        <View style={styles.sectionHeader}>
-          <Text style={[typography.h3, { color: colors.textPrimary }]}>
-            Gym Selection
-          </Text>
-          <TouchableOpacity onPress={loadGyms}>
-            <Text
-              style={[
-                typography.body,
-                { color: colors.primary, fontWeight: "600" },
-              ]}
-            >
-              Refresh
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <MinimalCard variant="default">
-          {currentGymName && (
-            <View style={styles.currentGym}>
-              <Text
-                style={[typography.caption, { color: colors.textTertiary }]}
-              >
-                Current Gym
-              </Text>
-              <Text
+        <Text
+          style={[
+            typography.h3,
+            { color: colors.textPrimary, marginBottom: 12 },
+          ]}
+        >
+          Gym Selection
+        </Text>
+
+        <TouchableOpacity
+          onPress={() => setShowGymDropdown(!showGymDropdown)}
+          activeOpacity={0.85}
+        >
+          <MinimalCard variant="bordered" style={styles.dropdownCard}>
+            <View style={styles.dropdownHeader}>
+              <View>
+                <Text
+                  style={[typography.caption, { color: colors.textTertiary }]}
+                >
+                  Current Gym
+                </Text>
+                <Text
+                  style={[
+                    typography.bodyEmphasis,
+                    { color: colors.textPrimary, marginTop: 2 },
+                  ]}
+                >
+                  {currentGymName || "No gym selected"}
+                </Text>
+              </View>
+              <View
                style={[
-                  typography.h3,
-                  { color: colors.textPrimary, marginTop: 4 },
+                  styles.dropdownIcon,
+                  { backgroundColor: colors.surfaceElevated },
                ]}
              >
-                {currentGymName}
-              </Text>
+                <Ionicons
+                  name={showGymDropdown ? "chevron-up" : "chevron-down"}
+                  size={20}
+                  color={colors.textSecondary}
+                />
+              </View>
            </View>
-          )}
+          </MinimalCard>
+        </TouchableOpacity>

-          {gymsLoading ? (
-            <View style={styles.loadingContainer}>
-              <ActivityIndicator color={colors.primary} />
-            </View>
-          ) : (
-            <>
-              <ScrollView
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                style={styles.gymScroll}
-                contentContainerStyle={styles.gymScrollContent}
-              >
+        {showGymDropdown && (
+          <MinimalCard variant="elevated" style={styles.dropdownOptions}>
+            {gymsLoading ? (
+              <View style={styles.loadingContainer}>
+                <ActivityIndicator color={colors.primary} />
+              </View>
+            ) : (
+              <>
                <TouchableOpacity
                  style={[
-                    styles.gymChip,
-                    {
-                      backgroundColor:
-                        selectedGymId === null
-                          ? `${colors.primary}20`
-                          : colors.surfaceElevated,
-                      borderColor:
-                        selectedGymId === null ? colors.primary : colors.border,
+                    styles.dropdownOption,
+                    selectedGymId === null && {
+                      backgroundColor: `${colors.primary}15`,
                    },
                  ]}
-                  onPress={() => setSelectedGymId(null)}
+                  onPress={() => {
+                    setSelectedGymId(null);
+                    setShowGymDropdown(false);
+                  }}
                >
                  <Text
                    style={[
@@ -446,51 +603,78 @@ export default function ProfileScreen() {
                  >
                    No Gym
                  </Text>
+                  {selectedGymId === null && (
+                    <Ionicons
+                      name="checkmark"
+                      size={20}
+                      color={colors.primary}
+                    />
+                  )}
                </TouchableOpacity>
                {gyms.map((gym) => (
                  <TouchableOpacity
                    key={gym.id}
                    style={[
-                      styles.gymChip,
-                      {
-                        backgroundColor:
-                          selectedGymId === gym.id
-                            ? `${colors.primary}20`
-                            : colors.surfaceElevated,
-                        borderColor:
-                          selectedGymId === gym.id
-                            ? colors.primary
-                            : colors.border,
+                      styles.dropdownOption,
+                      selectedGymId === gym.id && {
+                        backgroundColor: `${colors.primary}15`,
                      },
                    ]}
-                    onPress={() => setSelectedGymId(gym.id)}
+                    onPress={() => {
+                      setSelectedGymId(gym.id);
+                      setShowGymDropdown(false);
+                    }}
                  >
-                    <Text
-                      style={[
-                        typography.body,
-                        {
-                          color:
-                            selectedGymId === gym.id
-                              ? colors.primary
-                              : colors.textSecondary,
-                          fontWeight: selectedGymId === gym.id ? "600" : "400",
-                        },
-                      ]}
-                    >
-                      {gym.name}
-                    </Text>
+                    <View style={{ flex: 1 }}>
+                      <Text
+                        style={[
+                          typography.body,
+                          {
+                            color:
+                              selectedGymId === gym.id
+                                ? colors.primary
+                                : colors.textSecondary,
+                            fontWeight:
+                              selectedGymId === gym.id ? "600" : "400",
+                          },
+                        ]}
+                      >
+                        {gym.name}
+                      </Text>
+                      {gym.location && (
+                        <Text
+                          style={[
+                            typography.caption,
+                            { color: colors.textTertiary, marginTop: 2 },
+                          ]}
+                        >
+                          {gym.location}
+                        </Text>
+                      )}
+                    </View>
+                    {selectedGymId === gym.id && (
+                      <Ionicons
+                        name="checkmark"
+                        size={20}
+                        color={colors.primary}
+                      />
+                    )}
                  </TouchableOpacity>
                ))}
-              </ScrollView>
-              <MinimalButton
-                title="Apply Selection"
-                onPress={handleApplyGym}
-                variant="primary"
-                style={{ marginTop: 16 }}
-              />
-            </>
-          )}
-        </MinimalCard>
+                {selectedGymId !== currentGymId && (
+                  <MinimalButton
+                    title="Apply Selection"
+                    onPress={handleApplyGym}
+                    variant="primary"
+                    size="lg"
+                    fullWidth
+                    style={{ marginTop: 12 }}
+                  />
+                )}
+              </>
+            )}
+          </MinimalCard>
+        )}
      </View>

      {/* Support */}
@@ -580,8 +764,9 @@ const styles = StyleSheet.create({
    flex: 1,
  },
  content: {
-    padding: 24,
+    padding: 20,
    paddingTop: 60,
+    paddingBottom: 100,
  },
  profileCard: {
    alignItems: "center",
@@ -640,4 +825,78 @@ const styles = StyleSheet.create({
    borderWidth: 1.5,
    marginRight: 8,
  },
+  dropdownCard: {
+    padding: 16,
+  },
+  dropdownHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  dropdownIcon: {
+    width: 36,
+    height: 36,
+    borderRadius: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dropdownOptions: {
+    marginTop: 8,
+    padding: 8,
+  },
+  dropdownOption: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    borderRadius: 12,
+    marginBottom: 4,
+  },
+  fitnessProfileCard: {
+    padding: 16,
+  },
+  fitnessProfileHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  fitnessProfileIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 14,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  editButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  profileLoading: {
+    paddingVertical: 20,
+    alignItems: "center",
+  },
+  fitnessProfileStats: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    marginTop: 20,
+    paddingTop: 16,
+    borderTopWidth: 1,
+  },
+  profileStat: {
+    alignItems: "center",
+    flex: 1,
+  },
+  profileStatDivider: {
+    width: 1,
+    height: 40,
+  },
+  noProfile: {
+    marginTop: 16,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    alignItems: "center",
+  },
 });
@@ -130,19 +130,24 @@ export default function RecommendationsScreen() {
      >
        {/* Header */}
        <View style={styles.header}>
-          <View>
-            <Text style={[typography.h1, { color: colors.textPrimary }]}>
-              ✨ AI Recommendations
+          <View style={{ flex: 1 }}>
+            <Text
+              style={[
+                typography.h1,
+                { color: colors.textPrimary, fontSize: 32 },
+              ]}
+            >
+              Recommendations
            </Text>
            <Text
              style={[
                typography.body,
-                { color: colors.textSecondary, marginTop: 4 },
+                { color: colors.textSecondary, marginTop: 8 },
              ]}
            >
              {recommendations.length === 0
-                ? "Let's create your perfect plan! 🚀"
-                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you! 💪`}
+                ? "Let's create your perfect plan!"
+                : `${recommendations.length} plan${recommendations.length !== 1 ? "s" : ""} ready for you!`}
            </Text>
          </View>
          <TouchableOpacity
@@ -152,9 +157,10 @@ export default function RecommendationsScreen() {
          >
            <IconContainer
              variant="colored"
-              backgroundColor={`${colors.accent}20`}
+              backgroundColor={colors.accent}
+              size="lg"
            >
-              <Ionicons name="sparkles" size={24} color={colors.accent} />
+              <Ionicons name="sparkles" size={24} color={colors.white} />
              {unreadCount > 0 && (
                <View
                  style={[
@@ -174,10 +180,11 @@ export default function RecommendationsScreen() {
        {/* Generate Button */}
        <View style={styles.section}>
          <MinimalButton
-            title="🎯 Generate New Plan"
+            title="Generate New Plan"
            onPress={handleGenerateRecommendation}
            variant="primary"
            size="lg"
+            fullWidth
            loading={generating}
            disabled={generating}
            textStyle={{ fontSize: 16 }}
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import {
  View,
  Text,
@@ -9,13 +9,15 @@ import {
  Alert,
  TextInput,
  Platform,
-} from 'react-native';
-import { useRouter, Stack } from 'expo-router';
-import { useAuth } from '@clerk/clerk-expo';
-import { Ionicons } from '@expo/vector-icons';
-import { LinearGradient } from 'expo-linear-gradient';
-import { theme } from '../styles/theme';
-import { API_BASE_URL } from '../config/api';
+} from "react-native";
+import { useRouter, Stack } from "expo-router";
+import { useAuth } from "@clerk/clerk-expo";
+import { Ionicons } from "@expo/vector-icons";
+import { useTheme } from "../contexts/ThemeContext";
+import { MinimalCard } from "../components/MinimalCard";
+import { MinimalButton } from "../components/MinimalButton";
+import { IconContainer } from "../components/IconContainer";
+import { API_BASE_URL } from "../config/api";

 interface FitnessProfileData {
  height?: number;
@@ -30,29 +32,71 @@ interface FitnessProfileData {
 }

 const GENDER_OPTIONS = [
-  { label: 'Male', value: 'male', icon: 'male' },
-  { label: 'Female', value: 'female', icon: 'female' },
-  { label: 'Other', value: 'other', icon: 'transgender' },
+  { label: "Male", value: "male", icon: "male-outline" },
+  { label: "Female", value: "female", icon: "female-outline" },
+  { label: "Other", value: "other", icon: "transgender-outline" },
+  {
+    label: "Prefer not to say",
+    value: "prefer_not_to_say",
+    icon: "help-circle-outline",
+  },
 ];

 const FITNESS_GOAL_OPTIONS = [
-  { label: 'Weight Loss', value: 'weight_loss', icon: 'trending-down', color: theme.colors.danger },
-  { label: 'Muscle Gain', value: 'muscle_gain', icon: 'barbell', color: theme.colors.primary },
-  { label: 'Endurance', value: 'endurance', icon: 'bicycle', color: theme.colors.success },
-  { label: 'Flexibility', value: 'flexibility', icon: 'body', color: theme.colors.purple },
-  { label: 'General Fitness', value: 'general_fitness', icon: 'fitness', color: theme.colors.warning },
+  {
+    label: "Weight Loss",
+    value: "weight_loss",
+    icon: "trending-down",
+    color: "#FF3B3B",
+  },
+  {
+    label: "Muscle Gain",
+    value: "muscle_gain",
+    icon: "barbell",
+    color: "#0066FF",
+  },
+  { label: "Endurance", value: "endurance", icon: "bicycle", color: "#00D26A" },
+  {
+    label: "Flexibility",
+    value: "flexibility",
+    icon: "body",
+    color: "#7B2CBF",
+  },
+  {
+    label: "General Fitness",
+    value: "general_fitness",
+    icon: "fitness",
+    color: "#FFB800",
+  },
 ];

 const ACTIVITY_LEVEL_OPTIONS = [
-  { label: 'Sedentary', value: 'sedentary', description: 'Little to no exercise' },
-  { label: 'Light', value: 'light', description: '1-3 days/week' },
-  { label: 'Moderate', value: 'moderate', description: '3-5 days/week' },
-  { label: 'Active', value: 'active', description: '6-7 days/week' },
-  { label: 'Very Active', value: 'very_active', description: 'Intense daily training' },
+  {
+    label: "Sedentary",
+    value: "sedentary",
+    description: "Little to no exercise",
+  },
+  {
+    label: "Lightly Active",
+    value: "lightly_active",
+    description: "1-3 days/week",
+  },
+  {
+    label: "Moderately Active",
+    value: "moderately_active",
+    description: "3-5 days/week",
+  },
+  { label: "Very Active", value: "very_active", description: "6-7 days/week" },
+  {
+    label: "Extremely Active",
+    value: "extremely_active",
+    description: "Intense daily training",
+  },
 ];

 export default function FitnessProfileScreen() {
  const router = useRouter();
+  const { colors, typography } = useTheme();
  const { userId, getToken } = useAuth();
  const [loading, setLoading] = useState(false);
  const [fetchingProfile, setFetchingProfile] = useState(true);
@@ -66,34 +110,42 @@ export default function FitnessProfileScreen() {
    try {
      setFetchingProfile(true);
      const token = await getToken();
-      const response = await fetch(`${API_BASE_URL}/api/profile/fitness?userId=${userId}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
+      const response = await fetch(
+        `${API_BASE_URL}/api/profile/fitness?userId=${userId}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
        },
-      });
+      );

      if (response.ok) {
        const data = await response.json();
        if (data.profile) {
+          let activityLevel = data.profile.activityLevel || "";
+          if (activityLevel === "light") activityLevel = "lightly_active";
+          if (activityLevel === "moderate") activityLevel = "moderately_active";
+          if (activityLevel === "active") activityLevel = "very_active";
+
          setProfileData({
            height: data.profile.height,
            weight: data.profile.weight,
            age: data.profile.age,
-            gender: data.profile.gender || '',
+            gender: data.profile.gender || "",
            fitnessGoal: Array.isArray(data.profile.fitnessGoals)
              ? data.profile.fitnessGoals[0]
-              : (typeof data.profile.fitnessGoals === 'string'
+              : typeof data.profile.fitnessGoals === "string"
                ? JSON.parse(data.profile.fitnessGoals)[0]
-                : ''),
-            activityLevel: data.profile.activityLevel || '',
-            medicalConditions: data.profile.medicalConditions || '',
-            allergies: data.profile.allergies || '',
-            injuries: data.profile.injuries || '',
+                : "",
+            activityLevel: activityLevel,
+            medicalConditions: data.profile.medicalConditions || "",
+            allergies: data.profile.allergies || "",
+            injuries: data.profile.injuries || "",
          });
        }
      }
    } catch (error) {
-      console.error('Error fetching profile:', error);
+      console.error("Error fetching profile:", error);
    } finally {
      setFetchingProfile(false);
    }
@@ -104,40 +156,39 @@ export default function FitnessProfileScreen() {
      setLoading(true);
      const token = await getToken();

-      // Prepare data with userId and convert fitnessGoal to fitnessGoals array
      const dataToSave = {
        userId: userId,
        height: profileData.height,
        weight: profileData.weight,
        age: profileData.age,
-        gender: profileData.gender,
+        gender: profileData.gender || undefined,
        fitnessGoals: profileData.fitnessGoal ? [profileData.fitnessGoal] : [],
-        activityLevel: profileData.activityLevel,
+        activityLevel: profileData.activityLevel || undefined,
        medicalConditions: profileData.medicalConditions,
        allergies: profileData.allergies,
        injuries: profileData.injuries,
      };

      const response = await fetch(`${API_BASE_URL}/api/profile/fitness`, {
-        method: 'POST',
+        method: "POST",
        headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
          Authorization: `Bearer ${token}`,
        },
        body: JSON.stringify(dataToSave),
      });

      if (response.ok) {
-        Alert.alert('Success', 'Fitness profile saved successfully!', [
-          { text: 'OK', onPress: () => router.back() },
+        Alert.alert("Success", "Fitness profile saved successfully!", [
+          { text: "OK", onPress: () => router.back() },
        ]);
      } else {
        const error = await response.json();
-        Alert.alert('Error', error.error || 'Failed to save profile');
+        Alert.alert("Error", error.error || "Failed to save profile");
      }
    } catch (error) {
-      console.error('Error saving profile:', error);
-      Alert.alert('Error', 'Failed to save fitness profile');
+      console.error("Error saving profile:", error);
+      Alert.alert("Error", "Failed to save fitness profile");
    } finally {
      setLoading(false);
    }
@@ -149,8 +200,13 @@ export default function FitnessProfileScreen() {

  if (fetchingProfile) {
    return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color={theme.colors.primary} />
+      <View
+        style={[
+          styles.loadingContainer,
+          { backgroundColor: colors.background },
+        ]}
+      >
+        <ActivityIndicator size="large" color={colors.primary} />
      </View>
    );
  }
@@ -158,15 +214,28 @@ export default function FitnessProfileScreen() {
  return (
    <>
      <Stack.Screen options={{ headerShown: false }} />
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: colors.background }]}>
        {/* Header */}
-        <LinearGradient colors={theme.gradients.primary} style={styles.header}>
-          <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+        <View
+          style={[
+            styles.header,
+            {
+              backgroundColor: colors.primary,
+              paddingTop: Platform.OS === "ios" ? 60 : 40,
+            },
+          ]}
+        >
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => router.back()}
+          >
            <Ionicons name="arrow-back" size={24} color="#fff" />
          </TouchableOpacity>
-          <Text style={styles.headerTitle}>Fitness Profile</Text>
+          <Text style={[typography.h2, { color: "#fff" }]}>
+            Fitness Profile
+          </Text>
          <View style={{ width: 40 }} />
-        </LinearGradient>
+        </View>

        <ScrollView
          style={styles.scrollView}
@@ -175,87 +244,181 @@ export default function FitnessProfileScreen() {
        >
          {/* Basic Information */}
          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Basic Information</Text>
-            <View style={styles.card}>
-              <View style={styles.row}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Basic Information
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
+              <View style={styles.inputRow}>
                <View style={styles.inputGroup}>
-                  <Text style={styles.label}>Height (cm)</Text>
-                  <View style={styles.inputContainer}>
-                    <Ionicons name="resize-outline" size={20} color={theme.colors.gray400} />
+                  <Text
+                    style={[
+                      typography.label,
+                      { color: colors.textSecondary, marginBottom: 8 },
+                    ]}
+                  >
+                    HEIGHT (CM)
+                  </Text>
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      {
+                        backgroundColor: colors.surfaceElevated,
+                        borderColor: colors.border,
+                      },
+                    ]}
+                  >
+                    <Ionicons
+                      name="resize"
+                      size={20}
+                      color={colors.textTertiary}
+                    />
                    <TextInput
-                      style={styles.input}
-                      value={profileData.height?.toString() || ''}
+                      style={[styles.input, { color: colors.textPrimary }]}
+                      value={profileData.height?.toString() || ""}
                      onChangeText={(text) =>
-                        updateField('height', text ? parseFloat(text) : undefined)
+                        updateField(
+                          "height",
+                          text ? parseFloat(text) : undefined,
+                        )
                      }
                      keyboardType="decimal-pad"
                      placeholder="175"
-                      placeholderTextColor={theme.colors.gray400}
+                      placeholderTextColor={colors.textTertiary}
                    />
                  </View>
                </View>
                <View style={styles.inputGroup}>
-                  <Text style={styles.label}>Weight (kg)</Text>
-                  <View style={styles.inputContainer}>
-                    <Ionicons name="scale-outline" size={20} color={theme.colors.gray400} />
+                  <Text
+                    style={[
+                      typography.label,
+                      { color: colors.textSecondary, marginBottom: 8 },
+                    ]}
+                  >
+                    WEIGHT (KG)
+                  </Text>
+                  <View
+                    style={[
+                      styles.inputContainer,
+                      {
+                        backgroundColor: colors.surfaceElevated,
+                        borderColor: colors.border,
+                      },
+                    ]}
+                  >
+                    <Ionicons
+                      name="scale"
+                      size={20}
+                      color={colors.textTertiary}
+                    />
                    <TextInput
-                      style={styles.input}
-                      value={profileData.weight?.toString() || ''}
+                      style={[styles.input, { color: colors.textPrimary }]}
+                      value={profileData.weight?.toString() || ""}
                      onChangeText={(text) =>
-                        updateField('weight', text ? parseFloat(text) : undefined)
+                        updateField(
+                          "weight",
+                          text ? parseFloat(text) : undefined,
+                        )
                      }
                      keyboardType="decimal-pad"
                      placeholder="70"
-                      placeholderTextColor={theme.colors.gray400}
+                      placeholderTextColor={colors.textTertiary}
                    />
                  </View>
                </View>
              </View>
              <View style={styles.inputGroup}>
-                <Text style={styles.label}>Age</Text>
-                <View style={styles.inputContainer}>
-                  <Ionicons name="calendar-outline" size={20} color={theme.colors.gray400} />
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  AGE
+                </Text>
+                <View
+                  style={[
+                    styles.inputContainer,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                    },
+                  ]}
+                >
+                  <Ionicons
+                    name="calendar"
+                    size={20}
+                    color={colors.textTertiary}
+                  />
                  <TextInput
-                    style={styles.input}
-                    value={profileData.age?.toString() || ''}
+                    style={[styles.input, { color: colors.textPrimary }]}
+                    value={profileData.age?.toString() || ""}
                    onChangeText={(text) =>
-                      updateField('age', text ? parseInt(text, 10) : undefined)
+                      updateField("age", text ? parseInt(text, 10) : undefined)
                    }
                    keyboardType="number-pad"
                    placeholder="25"
-                    placeholderTextColor={theme.colors.gray400}
+                    placeholderTextColor={colors.textTertiary}
                  />
                </View>
              </View>
-            </View>
+            </MinimalCard>
          </View>

          {/* Gender Selection */}
          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Gender</Text>
-            <View style={styles.optionsRow}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Gender
+            </Text>
+            <View style={styles.genderRow}>
              {GENDER_OPTIONS.map((option) => (
                <TouchableOpacity
                  key={option.value}
                  style={[
-                    styles.optionCard,
-                    profileData.gender === option.value && styles.optionCardActive,
+                    styles.genderCard,
+                    {
+                      backgroundColor:
+                        profileData.gender === option.value
+                          ? colors.primary
+                          : colors.surfaceElevated,
+                      borderColor:
+                        profileData.gender === option.value
+                          ? colors.primary
+                          : colors.border,
+                    },
                  ]}
-                  onPress={() => updateField('gender', option.value)}
+                  onPress={() => updateField("gender", option.value)}
                >
                  <Ionicons
                    name={option.icon as any}
                    size={24}
                    color={
                      profileData.gender === option.value
-                        ? theme.colors.primary
-                        : theme.colors.gray400
+                        ? "#fff"
+                        : colors.textTertiary
                    }
                  />
                  <Text
                    style={[
-                      styles.optionLabel,
-                      profileData.gender === option.value && styles.optionLabelActive,
+                      typography.caption,
+                      {
+                        color:
+                          profileData.gender === option.value
+                            ? "#fff"
+                            : colors.textSecondary,
+                        fontWeight:
+                          profileData.gender === option.value ? "700" : "500",
+                        marginTop: 6,
+                      },
                    ]}
                  >
                    {option.label}
@@ -267,117 +430,236 @@ export default function FitnessProfileScreen() {

          {/* Fitness Goal */}
          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Primary Fitness Goal</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Primary Fitness Goal
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
              {FITNESS_GOAL_OPTIONS.map((option, index) => (
                <React.Fragment key={option.value}>
                  <TouchableOpacity
                    style={styles.listItem}
-                    onPress={() => updateField('fitnessGoal', option.value)}
+                    onPress={() => updateField("fitnessGoal", option.value)}
                  >
-                    <View style={[styles.iconCircle, { backgroundColor: `${option.color}20` }]}>
-                      <Ionicons name={option.icon as any} size={20} color={option.color} />
+                    <View
+                      style={[
+                        styles.iconCircle,
+                        { backgroundColor: `${option.color}20` },
+                      ]}
+                    >
+                      <Ionicons
+                        name={option.icon as any}
+                        size={20}
+                        color={option.color}
+                      />
                    </View>
-                    <Text style={styles.listItemText}>{option.label}</Text>
+                    <Text
+                      style={[
+                        typography.bodyEmphasis,
+                        { color: colors.textPrimary, flex: 1 },
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
                    {profileData.fitnessGoal === option.value && (
-                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                      <Ionicons
+                        name="checkmark-circle"
+                        size={24}
+                        color={colors.primary}
+                      />
                    )}
                  </TouchableOpacity>
-                  {index < FITNESS_GOAL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                  {index < FITNESS_GOAL_OPTIONS.length - 1 && (
+                    <View
+                      style={[
+                        styles.divider,
+                        { backgroundColor: colors.border },
+                      ]}
+                    />
+                  )}
                </React.Fragment>
              ))}
-            </View>
+            </MinimalCard>
          </View>

          {/* Activity Level */}
          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Activity Level</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Activity Level
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
              {ACTIVITY_LEVEL_OPTIONS.map((option, index) => (
                <React.Fragment key={option.value}>
                  <TouchableOpacity
                    style={styles.listItem}
-                    onPress={() => updateField('activityLevel', option.value)}
+                    onPress={() => updateField("activityLevel", option.value)}
                  >
                    <View style={{ flex: 1 }}>
-                      <Text style={styles.listItemText}>{option.label}</Text>
-                      <Text style={styles.listItemDescription}>{option.description}</Text>
+                      <Text
+                        style={[
+                          typography.bodyEmphasis,
+                          { color: colors.textPrimary },
+                        ]}
+                      >
+                        {option.label}
+                      </Text>
+                      <Text
+                        style={[
+                          typography.caption,
+                          { color: colors.textTertiary, marginTop: 2 },
+                        ]}
+                      >
+                        {option.description}
+                      </Text>
                    </View>
                    {profileData.activityLevel === option.value && (
-                      <Ionicons name="checkmark-circle" size={24} color={theme.colors.primary} />
+                      <Ionicons
+                        name="checkmark-circle"
+                        size={24}
+                        color={colors.primary}
+                      />
                    )}
                  </TouchableOpacity>
-                  {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && <View style={styles.divider} />}
+                  {index < ACTIVITY_LEVEL_OPTIONS.length - 1 && (
+                    <View
+                      style={[
+                        styles.divider,
+                        { backgroundColor: colors.border },
+                      ]}
+                    />
+                  )}
                </React.Fragment>
              ))}
-            </View>
+            </MinimalCard>
          </View>

          {/* Health Information */}
          <View style={styles.section}>
-            <Text style={styles.sectionTitle}>Health Information (Optional)</Text>
-            <View style={styles.card}>
+            <Text
+              style={[
+                typography.h3,
+                { color: colors.textPrimary, marginBottom: 16 },
+              ]}
+            >
+              Health Information
+            </Text>
+            <MinimalCard variant="elevated" style={styles.card}>
              <View style={styles.inputGroup}>
-                <Text style={styles.label}>Medical Conditions</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  MEDICAL CONDITIONS
+                </Text>
                <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.medicalConditions || ''}
-                  onChangeText={(text) => updateField('medicalConditions', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.medicalConditions || ""}
+                  onChangeText={(text) =>
+                    updateField("medicalConditions", text)
+                  }
                  placeholder="e.g., Asthma, diabetes..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                  multiline
                  numberOfLines={3}
                  textAlignVertical="top"
                />
              </View>
              <View style={styles.inputGroup}>
-                <Text style={styles.label}>Allergies</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  ALLERGIES
+                </Text>
                <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.allergies || ''}
-                  onChangeText={(text) => updateField('allergies', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.allergies || ""}
+                  onChangeText={(text) => updateField("allergies", text)}
                  placeholder="e.g., Peanuts, latex..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                  multiline
                  numberOfLines={3}
                  textAlignVertical="top"
                />
              </View>
              <View style={styles.inputGroup}>
-                <Text style={styles.label}>Injuries</Text>
+                <Text
+                  style={[
+                    typography.label,
+                    { color: colors.textSecondary, marginBottom: 8 },
+                  ]}
+                >
+                  INJURIES
+                </Text>
                <TextInput
-                  style={[styles.textArea]}
-                  value={profileData.injuries || ''}
-                  onChangeText={(text) => updateField('injuries', text)}
+                  style={[
+                    styles.textArea,
+                    {
+                      backgroundColor: colors.surfaceElevated,
+                      borderColor: colors.border,
+                      color: colors.textPrimary,
+                    },
+                  ]}
+                  value={profileData.injuries || ""}
+                  onChangeText={(text) => updateField("injuries", text)}
                  placeholder="e.g., Previous knee injury..."
-                  placeholderTextColor={theme.colors.gray400}
+                  placeholderTextColor={colors.textTertiary}
                  multiline
                  numberOfLines={3}
                  textAlignVertical="top"
                />
              </View>
-            </View>
+            </MinimalCard>
          </View>
+
+          <View style={{ height: 120 }} />
        </ScrollView>

        {/* Save Button */}
-        <View style={styles.footer}>
-          <TouchableOpacity
-            style={[styles.saveButton, loading && styles.saveButtonDisabled]}
+        <View
+          style={[
+            styles.footer,
+            {
+              backgroundColor: colors.background,
+              borderTopColor: colors.border,
+            },
+          ]}
+        >
+          <MinimalButton
+            title="Save Profile"
            onPress={handleSave}
-            disabled={loading}
-          >
-            <LinearGradient colors={theme.gradients.primary} style={styles.saveButtonGradient}>
-              {loading ? (
-                <ActivityIndicator color="#fff" />
-              ) : (
-                <>
-                  <Ionicons name="checkmark-circle" size={20} color="#fff" />
-                  <Text style={styles.saveButtonText}>Save Profile</Text>
-                </>
-              )}
-            </LinearGradient>
-          </TouchableOpacity>
+            variant="primary"
+            size="xl"
+            fullWidth
+            loading={loading}
+          />
        </View>
      </View>
    </>
@@ -387,34 +669,26 @@ export default function FitnessProfileScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: theme.colors.background,
  },
  loadingContainer: {
    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: theme.colors.background,
+    justifyContent: "center",
+    alignItems: "center",
  },
  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingTop: Platform.OS === 'ios' ? 60 : 40,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
    paddingBottom: 20,
    paddingHorizontal: 20,
  },
  backButton: {
    width: 40,
    height: 40,
-    borderRadius: 20,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  headerTitle: {
-    fontSize: theme.typography.fontSize['2xl'],
-    fontWeight: theme.typography.fontWeight.bold,
-    color: '#fff',
+    borderRadius: 12,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    justifyContent: "center",
+    alignItems: "center",
  },
  scrollView: {
    flex: 1,
@@ -424,148 +698,77 @@ const styles = StyleSheet.create({
    paddingBottom: 100,
  },
  section: {
-    marginBottom: 24,
-  },
-  sectionTitle: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray900,
-    marginBottom: 12,
+    marginBottom: 28,
  },
  card: {
-    backgroundColor: '#fff',
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    ...theme.shadows.subtle,
-    borderWidth: 1,
-    borderColor: theme.colors.gray100,
+    padding: 4,
  },
-  row: {
-    flexDirection: 'row',
+  inputRow: {
+    flexDirection: "row",
    gap: 12,
-    marginBottom: 16,
  },
  inputGroup: {
    flex: 1,
-    marginBottom: 16,
-  },
-  label: {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.semibold,
-    color: theme.colors.gray700,
-    marginBottom: 8,
+    marginBottom: 4,
  },
  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: theme.colors.gray50,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.gray200,
-    paddingHorizontal: 12,
-    gap: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 14,
+    borderWidth: 1.5,
+    paddingHorizontal: 14,
+    gap: 10,
  },
  input: {
    flex: 1,
-    paddingVertical: 12,
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray900,
+    paddingVertical: 14,
+    fontSize: 16,
+    fontWeight: "600",
  },
  textArea: {
-    backgroundColor: theme.colors.gray50,
-    borderRadius: theme.borderRadius.lg,
-    borderWidth: 1,
-    borderColor: theme.colors.gray200,
-    padding: 12,
-    fontSize: theme.typography.fontSize.base,
-    color: theme.colors.gray900,
-    minHeight: 80,
+    borderRadius: 14,
+    borderWidth: 1.5,
+    padding: 14,
+    fontSize: 16,
+    minHeight: 90,
  },
-  optionsRow: {
-    flexDirection: 'row',
-    gap: 12,
+  genderRow: {
+    flexDirection: "row",
+    gap: 10,
  },
-  optionCard: {
+  genderCard: {
    flex: 1,
-    backgroundColor: '#fff',
-    borderRadius: theme.borderRadius.lg,
-    padding: 16,
-    alignItems: 'center',
-    gap: 8,
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    borderRadius: 14,
    borderWidth: 2,
-    borderColor: theme.colors.gray200,
-    ...theme.shadows.subtle,
-  },
-  optionCardActive: {
-    borderColor: theme.colors.primary,
-    backgroundColor: `${theme.colors.primary}10`,
-  },
-  optionLabel: {
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.medium,
-    color: theme.colors.gray600,
-  },
-  optionLabelActive: {
-    color: theme.colors.primary,
-    fontWeight: theme.typography.fontWeight.bold,
+    alignItems: "center",
  },
  listItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 12,
-    gap: 12,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 14,
+    paddingHorizontal: 12,
+    gap: 14,
  },
  iconCircle: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  listItemText: {
-    flex: 1,
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.medium,
-    color: theme.colors.gray900,
-  },
-  listItemDescription: {
-    fontSize: theme.typography.fontSize.xs,
-    color: theme.colors.gray500,
-    marginTop: 2,
+    width: 44,
+    height: 44,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
  },
  divider: {
    height: 1,
-    backgroundColor: theme.colors.gray100,
+    marginLeft: 58,
  },
  footer: {
-    position: 'absolute',
+    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    padding: 20,
-    paddingBottom: Platform.OS === 'ios' ? 40 : 20,
-    backgroundColor: '#fff',
+    paddingBottom: 34,
    borderTopWidth: 1,
-    borderTopColor: theme.colors.gray100,
-    ...theme.shadows.medium,
-  },
-  saveButton: {
-    borderRadius: theme.borderRadius.lg,
-    overflow: 'hidden',
-  },
-  saveButtonGradient: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 16,
-    gap: 8,
-  },
-  saveButtonDisabled: {
-    opacity: 0.6,
-  },
-  saveButtonText: {
-    fontSize: theme.typography.fontSize.base,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: '#fff',
  },
 });
@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from "react";
+import { View, Animated, StyleSheet, Text } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+import { useTheme } from "../contexts/ThemeContext";
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+interface ActivityRingProps {
+  size?: number;
+  strokeWidth?: number;
+  progress: number;
+  current: number;
+  goal: number;
+  label: string;
+  color: string;
+  icon?: React.ReactNode;
+}
+
+export function ActivityRing({
+  size = 100,
+  strokeWidth = 10,
+  progress,
+  current,
+  goal,
+  label,
+  color,
+  icon,
+}: ActivityRingProps) {
+  const { colors, typography } = useTheme();
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: Math.min(progress, 100),
+      duration: 1200,
+      useNativeDriver: true,
+    }).start();
+  }, [progress]);
+
+  const strokeDashoffset = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: [circumference, 0],
+  });
+
+  return (
+    <View style={styles.container}>
+      <View
+        style={{
+          width: size,
+          height: size,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+          <Circle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={colors.surfaceElevated}
+            strokeWidth={strokeWidth}
+            fill="transparent"
+          />
+          <AnimatedCircle
+            cx={size / 2}
+            cy={size / 2}
+            r={radius}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            strokeDasharray={circumference}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+            rotation="-90"
+            origin={`${size / 2}, ${size / 2}`}
+          />
+        </Svg>
+        <View
+          style={[
+            StyleSheet.absoluteFillObject,
+            { justifyContent: "center", alignItems: "center" },
+          ]}
+        >
+          {icon ? (
+            <View style={styles.iconContainer}>{icon}</View>
+          ) : (
+            <Text
+              style={[
+                typography.statLarge,
+                { color: colors.textPrimary, fontSize: size * 0.28 },
+              ]}
+            >
+              {Math.round(current)}
+            </Text>
+          )}
+        </View>
+      </View>
+      <Text
+        style={[
+          typography.label,
+          { color: colors.textTertiary, marginTop: 8, textAlign: "center" },
+        ]}
+      >
+        {label}
+      </Text>
+      <Text
+        style={[
+          typography.caption,
+          { color: colors.textSecondary, marginTop: 2 },
+        ]}
+      >
+        / {goal.toLocaleString()}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+  },
+  iconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});
@@ -10,49 +10,41 @@ type BadgeVariant =
  | "danger"
  | "info"
  | "primary";
-type BadgeSize = "sm" | "md";
+type BadgeSize = "sm" | "md" | "lg";

 interface BadgeProps {
  label: string;
  variant?: BadgeVariant;
  size?: BadgeSize;
  style?: StyleProp<ViewStyle>;
+  emoji?: string;
 }

-/**
- * Badge - Pill-shaped status indicator
- *
- * Variants:
- * - neutral: Gray badge for general labels
- * - success: Green badge for positive status
- * - warning: Orange/yellow badge for warnings
- * - danger: Red badge for errors or critical status
- * - info: Blue badge for informational status
- * - primary: Primary color badge
- *
- * Sizes:
- * - sm: 5px vertical, 10px horizontal, 11px font
- * - md: 6px vertical, 12px horizontal, 13px font (default)
- */
 export function Badge({
  label,
  variant = "neutral",
  size = "md",
  style,
+  emoji,
 }: BadgeProps) {
  const { colors } = useTheme();

  const sizeStyles = {
    sm: {
-      paddingVertical: 5,
-      paddingHorizontal: 10,
+      paddingVertical: 6,
+      paddingHorizontal: 12,
      fontSize: fontSize.xs,
    },
    md: {
-      paddingVertical: 6,
-      paddingHorizontal: 12,
+      paddingVertical: 8,
+      paddingHorizontal: 14,
      fontSize: fontSize.sm,
    },
+    lg: {
+      paddingVertical: 10,
+      paddingHorizontal: 18,
+      fontSize: fontSize.base,
+    },
  };

  const variantStyles: Record<
@@ -64,24 +56,24 @@ export function Badge({
      color: colors.textSecondary,
    },
    success: {
-      backgroundColor: `${colors.success}20`, // 20% opacity
-      color: colors.success,
+      backgroundColor: colors.success,
+      color: colors.white,
    },
    warning: {
-      backgroundColor: `${colors.warning}20`,
-      color: colors.warning,
+      backgroundColor: colors.warning,
+      color: colors.black,
    },
    danger: {
-      backgroundColor: `${colors.danger}20`,
-      color: colors.danger,
+      backgroundColor: colors.danger,
+      color: colors.white,
    },
    info: {
-      backgroundColor: `${colors.info}20`,
-      color: colors.info,
+      backgroundColor: colors.info,
+      color: colors.white,
    },
    primary: {
-      backgroundColor: `${colors.primary}20`,
-      color: colors.primary,
+      backgroundColor: colors.primary,
+      color: colors.white,
    },
  };

@@ -103,10 +95,11 @@ export function Badge({
          {
            color: variantStyles[variant].color,
            fontSize: sizeStyles[size].fontSize,
-            fontWeight: fontWeight.medium,
+            fontWeight: fontWeight.bold,
          },
        ]}
      >
+        {emoji && `${emoji} `}
        {label}
      </Text>
    </View>
@@ -115,7 +108,7 @@ export function Badge({

 const styles = StyleSheet.create({
  badge: {
-    borderRadius: 999, // Full pill shape
+    borderRadius: 12,
    alignSelf: "flex-start",
  },
  label: {
@@ -1,21 +1,10 @@
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
 import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
 import { Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "../contexts/ThemeContext";

-/**
- * CustomTabBar - Minimal bottom navigation with pill indicator
- *
- * Design:
- * - Simple flat design (no floating, no glassmorphism)
- * - Clean icons with outline/filled states
- * - Small pill indicator below active tab
- * - 56px height (reduced from 70px)
- * - No animations (just opacity fade on press)
- * - Theme-aware colors
- */
 export function CustomTabBar({
  state,
  descriptors,
@@ -71,6 +60,23 @@ export function CustomTabBar({
          }
        };

+        const getLabel = (routeName: string) => {
+          switch (routeName) {
+            case "index":
+              return "Home";
+            case "goals":
+              return "Goals";
+            case "attendance":
+              return "Attendance";
+            case "recommendations":
+              return "Plans";
+            case "profile":
+              return "Profile";
+            default:
+              return "";
+          }
+        };
+
        return (
          <TouchableOpacity
            key={index}
@@ -85,7 +91,7 @@ export function CustomTabBar({
            <View style={styles.iconWrapper}>
              <Ionicons
                name={getIconName(route.name, isFocused)}
-                size={24}
+                size={26}
                color={isFocused ? colors.primary : colors.textTertiary}
              />
              {isFocused && (
@@ -97,6 +103,17 @@ export function CustomTabBar({
                />
              )}
            </View>
+            <Text
+              style={[
+                styles.label,
+                {
+                  color: isFocused ? colors.primary : colors.textTertiary,
+                  fontWeight: isFocused ? "700" : "500",
+                },
+              ]}
+            >
+              {getLabel(route.name)}
+            </Text>
          </TouchableOpacity>
        );
      })}
@@ -107,8 +124,9 @@ export function CustomTabBar({
 const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
-    height: 56,
+    height: 70,
    borderTopWidth: 1,
+    paddingTop: 8,
  },
  tabItem: {
    flex: 1,
@@ -121,9 +139,13 @@ const styles = StyleSheet.create({
    justifyContent: "center",
  },
  indicator: {
-    width: 24,
-    height: 3,
-    borderRadius: 999,
+    width: 20,
+    height: 4,
+    borderRadius: 2,
+    marginTop: 4,
+  },
+  label: {
+    fontSize: 11,
    marginTop: 4,
  },
 });
@@ -122,15 +122,17 @@ export function GoalProgressCard({

  return (
    <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
+      <TouchableOpacity onPress={onPress} activeOpacity={0.85}>
        <MinimalCard
-          variant="bordered"
+          variant="elevated"
          style={[
            styles.card,
            isCompleted && {
-              backgroundColor: colors.overlayLight,
+              backgroundColor: colors.surfaceElevated,
+              opacity: 0.8,
            },
          ]}
+          padding={20}
        >
          {/* Header */}
          <View style={styles.header}>
@@ -289,13 +291,14 @@ export function GoalProgressCard({

 const styles = StyleSheet.create({
  card: {
-    marginBottom: 12,
+    marginBottom: 16,
+    borderRadius: 20,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
-    marginBottom: 12,
+    marginBottom: 16,
  },
  titleRow: {
    flexDirection: "row",
@@ -304,23 +307,23 @@ const styles = StyleSheet.create({
  },
  titleContainer: {
    flex: 1,
-    marginLeft: 12,
+    marginLeft: 14,
  },
  actions: {
    flexDirection: "row",
-    gap: 8,
+    gap: 12,
  },
  actionButton: {
-    padding: 4,
+    padding: 6,
  },
  progressSection: {
-    marginBottom: 12,
+    marginBottom: 16,
  },
  progressInfo: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
-    marginBottom: 8,
+    marginBottom: 10,
  },
  footer: {
    flexDirection: "row",
@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Text, StyleSheet, Dimensions } from "react-native";
 import { PieChart } from "react-native-chart-kit";
-import { theme } from "../styles/theme";
+import { useTheme } from "../contexts/ThemeContext";

 interface GoalTypeData {
  goalType: string;
@@ -17,37 +17,40 @@ export function GoalTypeBreakdownChart({
  data,
  title = "Goals by Type",
 }: GoalTypeBreakdownChartProps) {
+  const { colors, typography } = useTheme();
  const screenWidth = Dimensions.get("window").width;

-  // Color palette for different goal types
-  const colors = [
-    "#3b82f6", // Blue
-    "#10b981", // Green
-    "#f59e0b", // Orange
-    "#8b5cf6", // Purple
-    "#ec4899", // Pink
-    "#06b6d4", // Cyan
+  const chartColors = [
+    colors.primary,
+    colors.success,
+    colors.warning,
+    colors.accent,
+    colors.secondary,
+    colors.info,
  ];

-  // Prepare chart data
  const chartData = data.map((item, index) => ({
-    name: item.goalType,
+    name: item.goalType
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, (l) => l.toUpperCase()),
    count: item.count,
-    color: colors[index % colors.length],
-    legendFontColor: theme.colors.gray600,
+    color: chartColors[index % chartColors.length],
+    legendFontColor: colors.textSecondary,
    legendFontSize: 12,
  }));

-  const chartConfig = {
-    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-  };
+  const totalGoals = data.reduce((sum, item) => sum + item.count, 0);

  if (data.length === 0) {
    return (
      <View style={styles.container}>
-        <Text style={styles.title}>{title}</Text>
+        <Text style={[typography.h4, { color: colors.textPrimary }]}>
+          {title}
+        </Text>
        <View style={styles.emptyState}>
-          <Text style={styles.emptyText}>No goals yet</Text>
+          <Text style={[typography.body, { color: colors.textTertiary }]}>
+            No goals yet
+          </Text>
        </View>
      </View>
    );
@@ -55,46 +58,123 @@ export function GoalTypeBreakdownChart({

  return (
    <View style={styles.container}>
-      <Text style={styles.title}>{title}</Text>
+      <Text
+        style={[typography.h4, { color: colors.textPrimary, marginBottom: 16 }]}
+      >
+        {title}
+      </Text>
+
+      {/* Summary Stats */}
+      <View style={styles.summaryRow}>
+        <View style={styles.summaryItem}>
+          <Text
+            style={[
+              typography.statLarge,
+              { color: colors.primary, fontSize: 32 },
+            ]}
+          >
+            {totalGoals}
+          </Text>
+          <Text style={[typography.caption, { color: colors.textTertiary }]}>
+            Total Goals
+          </Text>
+        </View>
+        <View style={styles.summaryItem}>
+          <Text
+            style={[
+              typography.statLarge,
+              { color: colors.success, fontSize: 32 },
+            ]}
+          >
+            {data.length}
+          </Text>
+          <Text style={[typography.caption, { color: colors.textTertiary }]}>
+            Types
+          </Text>
+        </View>
+      </View>
+
      <View style={styles.chartContainer}>
        <PieChart
          data={chartData}
-          width={screenWidth - 60}
-          height={200}
-          chartConfig={chartConfig}
+          width={screenWidth - 80}
+          height={160}
+          chartConfig={{
+            color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
+          }}
          accessor="count"
          backgroundColor="transparent"
          paddingLeft="15"
          absolute
        />
      </View>
+
+      {/* Legend */}
+      <View style={styles.legendGrid}>
+        {data.map((item, index) => (
+          <View key={item.goalType} style={styles.legendItem}>
+            <View
+              style={[
+                styles.legendDot,
+                { backgroundColor: chartColors[index % chartColors.length] },
+              ]}
+            />
+            <Text
+              style={[
+                typography.caption,
+                { color: colors.textSecondary, flex: 1 },
+              ]}
+              numberOfLines={1}
+            >
+              {item.goalType
+                .replace(/_/g, " ")
+                .replace(/\b\w/g, (l) => l.toUpperCase())}
+            </Text>
+            <Text
+              style={[typography.bodyEmphasis, { color: colors.textPrimary }]}
+            >
+              {item.count}
+            </Text>
+          </View>
+        ))}
+      </View>
    </View>
  );
 }

 const styles = StyleSheet.create({
  container: {
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    marginBottom: 16,
-    ...theme.shadows.medium,
+    borderRadius: 16,
+    padding: 4,
  },
-  title: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray700,
-    marginBottom: 12,
+  summaryRow: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    marginBottom: 16,
+    paddingVertical: 12,
+  },
+  summaryItem: {
+    alignItems: "center",
  },
  chartContainer: {
    alignItems: "center",
+    marginBottom: 16,
+  },
+  legendGrid: {
+    gap: 10,
+  },
+  legendItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  legendDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
  },
  emptyState: {
-    paddingVertical: 40,
+    paddingVertical: 32,
    alignItems: "center",
  },
-  emptyText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray400,
-  },
 });
@@ -3,7 +3,7 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";

 type IconContainerVariant = "plain" | "subtle" | "colored";
-type IconContainerSize = "sm" | "md" | "lg";
+type IconContainerSize = "sm" | "md" | "lg" | "xl";

 interface IconContainerProps {
  children: React.ReactNode;
@@ -13,19 +13,6 @@ interface IconContainerProps {
  style?: StyleProp<ViewStyle>;
 }

-/**
- * IconContainer - Clean container for icons with subtle backgrounds
- *
- * Variants:
- * - plain: No background, just the icon
- * - subtle: Light background (surfaceSecondary)
- * - colored: Custom background color (pass backgroundColor prop)
- *
- * Sizes:
- * - sm: 32px circle
- * - md: 40px circle (default)
- * - lg: 48px circle
- */
 export function IconContainer({
  children,
  variant = "subtle",
@@ -37,19 +24,24 @@ export function IconContainer({

  const sizeStyles: Record<IconContainerSize, ViewStyle> = {
    sm: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
+      width: 36,
+      height: 36,
+      borderRadius: 10,
    },
    md: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-    },
-    lg: {
      width: 48,
      height: 48,
-      borderRadius: 24,
+      borderRadius: 14,
+    },
+    lg: {
+      width: 56,
+      height: 56,
+      borderRadius: 16,
+    },
+    xl: {
+      width: 64,
+      height: 64,
+      borderRadius: 18,
    },
  };

@@ -11,8 +11,13 @@ import {
 import { useTheme } from "../contexts/ThemeContext";
 import { fontSize, fontWeight } from "../styles/typography";

-type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
-type ButtonSize = "sm" | "md" | "lg";
+type ButtonVariant =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "danger"
+  | "success";
+type ButtonSize = "sm" | "md" | "lg" | "xl";

 interface MinimalButtonProps {
  title: string;
@@ -23,22 +28,9 @@ interface MinimalButtonProps {
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
  textStyle?: StyleProp<TextStyle>;
+  fullWidth?: boolean;
 }

-/**
- * MinimalButton - Clean button component with solid colors
- *
- * Variants:
- * - primary: Solid primary background
- * - secondary: Outlined with primary color
- * - tertiary: Text only, no background
- * - danger: Solid danger background
- *
- * Sizes:
- * - sm: 12px vertical padding, 16px horizontal
- * - md: 14px vertical padding, 24px horizontal (default)
- * - lg: 16px vertical padding, 32px horizontal
- */
 export function MinimalButton({
  title,
  onPress,
@@ -48,37 +40,42 @@ export function MinimalButton({
  disabled = false,
  style,
  textStyle,
+  fullWidth = false,
 }: MinimalButtonProps) {
  const { colors } = useTheme();

  const isDisabled = disabled || loading;

-  // Get button styles based on variant
  const getButtonStyle = (): ViewStyle => {
    const baseStyle: ViewStyle = {
-      borderRadius: 10,
+      borderRadius: 14,
      alignItems: "center",
      justifyContent: "center",
      opacity: isDisabled ? 0.5 : 1,
    };

-    // Size-specific padding
    const sizeStyles: Record<
      ButtonSize,
      { paddingVertical: number; paddingHorizontal: number }
    > = {
-      sm: { paddingVertical: 12, paddingHorizontal: 16 },
-      md: { paddingVertical: 14, paddingHorizontal: 24 },
-      lg: { paddingVertical: 16, paddingHorizontal: 32 },
+      sm: { paddingVertical: 12, paddingHorizontal: 20 },
+      md: { paddingVertical: 16, paddingHorizontal: 28 },
+      lg: { paddingVertical: 18, paddingHorizontal: 36 },
+      xl: { paddingVertical: 20, paddingHorizontal: 44 },
    };

    const variantStyles: Record<ButtonVariant, ViewStyle> = {
      primary: {
        backgroundColor: colors.primary,
+        shadowColor: colors.primary,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
      },
      secondary: {
        backgroundColor: "transparent",
-        borderWidth: 1.5,
+        borderWidth: 2,
        borderColor: colors.primary,
      },
      tertiary: {
@@ -86,6 +83,19 @@ export function MinimalButton({
      },
      danger: {
        backgroundColor: colors.danger,
+        shadowColor: colors.danger,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
+      },
+      success: {
+        backgroundColor: colors.success,
+        shadowColor: colors.success,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        elevation: 4,
      },
    };

@@ -93,29 +103,23 @@ export function MinimalButton({
      ...baseStyle,
      ...sizeStyles[size],
      ...variantStyles[variant],
+      ...(fullWidth && { width: "100%" }),
    };
  };

-  // Get text styles based on variant
  const getTextStyle = (): TextStyle => {
    const baseTextStyle: TextStyle = {
-      fontSize: fontSize.base,
-      fontWeight: fontWeight.semibold,
+      fontSize: size === "sm" ? fontSize.sm : fontSize.md,
+      fontWeight: fontWeight.bold,
+      letterSpacing: 0.5,
    };

    const variantTextStyles: Record<ButtonVariant, TextStyle> = {
-      primary: {
-        color: colors.white,
-      },
-      secondary: {
-        color: colors.primary,
-      },
-      tertiary: {
-        color: colors.primary,
-      },
-      danger: {
-        color: colors.white,
-      },
+      primary: { color: colors.white },
+      secondary: { color: colors.primary },
+      tertiary: { color: colors.primary },
+      danger: { color: colors.white },
+      success: { color: colors.white },
    };

    return {
@@ -129,7 +133,7 @@ export function MinimalButton({
      style={[getButtonStyle(), style]}
      onPress={onPress}
      disabled={isDisabled}
-      activeOpacity={0.7}
+      activeOpacity={0.85}
    >
      {loading ? (
        <ActivityIndicator
@@ -146,7 +150,3 @@ export function MinimalButton({
    </TouchableOpacity>
  );
 }
-
-const styles = StyleSheet.create({
-  // No static styles needed - all dynamic based on theme
-});
@@ -8,28 +8,22 @@ import {
 } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";

-type CardVariant = "default" | "elevated" | "bordered";
+type CardVariant = "default" | "elevated" | "bordered" | "gradient";

 interface MinimalCardProps {
  children: React.ReactNode;
  variant?: CardVariant;
  onPress?: () => void;
  style?: StyleProp<ViewStyle>;
+  padding?: number;
 }

-/**
- * MinimalCard - Clean card component without gradients
- *
- * Variants:
- * - default: Subtle shadow on surface background
- * - elevated: More prominent shadow
- * - bordered: Border instead of shadow
- */
 export function MinimalCard({
  children,
  variant = "default",
  onPress,
  style,
+  padding = 20,
 }: MinimalCardProps) {
  const { colors } = useTheme();

@@ -37,13 +31,20 @@ export function MinimalCard({
    styles.base,
    {
      backgroundColor: colors.surface,
+      padding: padding,
    },
    variant === "default" && styles.default,
-    variant === "elevated" && styles.elevated,
+    variant === "elevated" && {
+      ...styles.elevated,
+      backgroundColor: colors.surfaceElevated,
+    },
    variant === "bordered" && {
      borderWidth: 1,
      borderColor: colors.border,
    },
+    variant === "gradient" && {
+      backgroundColor: colors.surfaceElevated,
+    },
    style,
  ];

@@ -52,7 +53,7 @@ export function MinimalCard({
      <TouchableOpacity
        style={cardStyles}
        onPress={onPress}
-        activeOpacity={0.7}
+        activeOpacity={0.85}
      >
        {children}
      </TouchableOpacity>
@@ -64,21 +65,20 @@ export function MinimalCard({

 const styles = StyleSheet.create({
  base: {
-    borderRadius: 12,
-    padding: 16,
+    borderRadius: 20,
  },
  default: {
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 3,
-    elevation: 1,
-  },
-  elevated: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 8,
-    elevation: 2,
+    elevation: 3,
+  },
+  elevated: {
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 16,
+    elevation: 6,
  },
 });
@@ -3,43 +3,28 @@ import { View, StyleSheet, ViewStyle, StyleProp } from "react-native";
 import { useTheme } from "../contexts/ThemeContext";

 interface ProgressBarProps {
-  progress: number; // 0-1 (e.g., 0.75 for 75%)
+  progress: number;
  color?: string;
  backgroundColor?: string;
  height?: number;
  borderRadius?: number;
  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
 }

-/**
- * ProgressBar - Simple linear progress indicator
- *
- * Usage:
- * - Goal progress tracking
- * - Loading states
- * - Completion indicators
- *
- * Props:
- * - progress: Value between 0 and 1 (e.g., 0.75 for 75%)
- * - color: Custom fill color (defaults to theme primary)
- * - backgroundColor: Custom track color (defaults to theme border)
- * - height: Bar height in pixels (defaults to 8)
- * - borderRadius: Corner radius (defaults to 999 for full pill shape)
- */
 export function ProgressBar({
  progress,
  color,
  backgroundColor,
-  height = 8,
+  height = 10,
  borderRadius = 999,
  style,
 }: ProgressBarProps) {
  const { colors } = useTheme();

-  // Clamp progress between 0 and 1
  const clampedProgress = Math.min(Math.max(progress, 0), 1);

-  const trackColor = backgroundColor || colors.border;
+  const trackColor = backgroundColor || colors.surfaceElevated;
  const fillColor = color || colors.primary;

  return (
@@ -17,14 +17,6 @@ interface SectionHeaderProps {
  style?: StyleProp<ViewStyle>;
 }

-/**
- * SectionHeader - Clean section header with optional action button
- *
- * Usage:
- * - Divides content into logical sections
- * - Optional subtitle for additional context
- * - Optional action button (e.g., "See All", "Add New")
- */
 export function SectionHeader({
  title,
  subtitle,
@@ -44,7 +36,7 @@ export function SectionHeader({
          <Text
            style={[
              typography.caption,
-              { color: colors.textTertiary, marginTop: 2 },
+              { color: colors.textTertiary, marginTop: 4 },
            ]}
          >
            {subtitle}
@@ -53,12 +45,7 @@ export function SectionHeader({
      </View>
      {actionLabel && onActionPress && (
        <TouchableOpacity onPress={onActionPress} activeOpacity={0.7}>
-          <Text
-            style={[
-              typography.body,
-              { color: colors.primary, fontWeight: "600" },
-            ]}
-          >
+          <Text style={[typography.bodyEmphasis, { color: colors.primary }]}>
            {actionLabel}
          </Text>
        </TouchableOpacity>
@@ -72,7 +59,7 @@ const styles = StyleSheet.create({
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
-    marginBottom: 12,
+    marginBottom: 16,
  },
  textContainer: {
    flex: 1,
@@ -1,7 +1,7 @@
 import React from "react";
 import { View, Text, StyleSheet, Dimensions } from "react-native";
 import { LineChart } from "react-native-chart-kit";
-import { theme } from "../styles/theme";
+import { useTheme } from "../contexts/ThemeContext";
 import type { WeeklyTrendData } from "../api/types";

 interface WeeklyProgressChartProps {
@@ -13,28 +13,26 @@ export function WeeklyProgressChart({
  weeklyData,
  title = "Weekly Progress",
 }: WeeklyProgressChartProps) {
+  const { colors, typography } = useTheme();
  const screenWidth = Dimensions.get("window").width;

-  // Prepare chart data
-  const labels = weeklyData.map((week) => week.weekLabel);
-  const checkInsData = weeklyData.map((week) => week.checkIns);
-  const goalsCompletedData = weeklyData.map((week) => week.goalsCompleted);
-  const avgProgressData = weeklyData.map((week) => week.averageProgress);
+  const labels = weeklyData.map((week: WeeklyTrendData) => week.weekLabel);
+  const checkInsData = weeklyData.map((week: WeeklyTrendData) => week.checkIns);
+  const goalsCompletedData = weeklyData.map(
+    (week: WeeklyTrendData) => week.goalsCompleted,
+  );

  const chartConfig = {
-    backgroundColor: theme.colors.white,
-    backgroundGradientFrom: theme.colors.white,
-    backgroundGradientTo: theme.colors.white,
+    backgroundColor: colors.surface,
+    backgroundGradientFrom: colors.surface,
+    backgroundGradientTo: colors.surface,
    decimalPlaces: 0,
-    color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`,
-    labelColor: (opacity = 1) => `rgba(107, 114, 128, ${opacity})`,
-    style: {
-      borderRadius: theme.borderRadius.lg,
-    },
+    color: (opacity = 1) => `rgba(0, 102, 255, ${opacity})`,
+    labelColor: (opacity = 1) => colors.textTertiary,
    propsForDots: {
-      r: "4",
+      r: "5",
      strokeWidth: "2",
-      stroke: theme.colors.primary,
+      stroke: colors.primary,
    },
  };

@@ -43,31 +41,40 @@ export function WeeklyProgressChart({
    datasets: [
      {
        data: checkInsData,
-        color: (opacity = 1) => `rgba(59, 130, 246, ${opacity})`, // Blue for check-ins
-        strokeWidth: 2,
+        color: () => colors.primary,
+        strokeWidth: 3,
      },
      {
        data: goalsCompletedData,
-        color: (opacity = 1) => `rgba(16, 185, 129, ${opacity})`, // Green for goals
-        strokeWidth: 2,
+        color: () => colors.success,
+        strokeWidth: 3,
      },
    ],
-    legend: ["Check-ins", "Goals Completed"],
+    legend: ["Check-ins", "Goals"],
  };

  return (
    <View style={styles.container}>
-      <Text style={styles.title}>{title}</Text>
+      {title && (
+        <Text
+          style={[
+            typography.h4,
+            { color: colors.textPrimary, marginBottom: 16 },
+          ]}
+        >
+          {title}
+        </Text>
+      )}
      <View style={styles.chartContainer}>
        <LineChart
          data={data}
-          width={screenWidth - 60}
-          height={220}
+          width={screenWidth - 80}
+          height={180}
          chartConfig={chartConfig}
          bezier
          style={styles.chart}
          withInnerLines={true}
-          withOuterLines={true}
+          withOuterLines={false}
          withVerticalLabels={true}
          withHorizontalLabels={true}
          fromZero={true}
@@ -75,12 +82,20 @@ export function WeeklyProgressChart({
      </View>
      <View style={styles.legend}>
        <View style={styles.legendItem}>
-          <View style={[styles.legendDot, { backgroundColor: "#3b82f6" }]} />
-          <Text style={styles.legendText}>Check-ins</Text>
+          <View
+            style={[styles.legendDot, { backgroundColor: colors.primary }]}
+          />
+          <Text style={[typography.caption, { color: colors.textSecondary }]}>
+            Check-ins
+          </Text>
        </View>
        <View style={styles.legendItem}>
-          <View style={[styles.legendDot, { backgroundColor: "#10b981" }]} />
-          <Text style={styles.legendText}>Goals Completed</Text>
+          <View
+            style={[styles.legendDot, { backgroundColor: colors.success }]}
+          />
+          <Text style={[typography.caption, { color: colors.textSecondary }]}>
+            Goals
+          </Text>
        </View>
      </View>
    </View>
@@ -89,17 +104,8 @@ export function WeeklyProgressChart({

 const styles = StyleSheet.create({
  container: {
-    backgroundColor: theme.colors.white,
-    borderRadius: theme.borderRadius.xl,
-    padding: 16,
-    marginBottom: 16,
-    ...theme.shadows.medium,
-  },
-  title: {
-    fontSize: theme.typography.fontSize.lg,
-    fontWeight: theme.typography.fontWeight.bold,
-    color: theme.colors.gray700,
-    marginBottom: 12,
+    borderRadius: 16,
+    padding: 4,
  },
  chartContainer: {
    alignItems: "center",
@@ -107,26 +113,22 @@ const styles = StyleSheet.create({
  },
  chart: {
    marginVertical: 8,
-    borderRadius: theme.borderRadius.lg,
+    borderRadius: 12,
  },
  legend: {
    flexDirection: "row",
    justifyContent: "center",
-    gap: 20,
+    gap: 24,
    paddingTop: 8,
  },
  legendItem: {
    flexDirection: "row",
    alignItems: "center",
-    gap: 6,
+    gap: 8,
  },
  legendDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
  },
-  legendText: {
-    fontSize: theme.typography.fontSize.sm,
-    color: theme.colors.gray500,
-  },
 });
@@ -35,6 +35,7 @@ export const API_ENDPOINTS = {
  USERS: {
    LIST: "/api/users",
    STATISTICS: "/api/users/statistics",
+    GYM: "/api/users/gym",
  },
  GYMS: "/api/gyms",
  ATTENDANCE: {
@@ -43,6 +44,19 @@ export const API_ENDPOINTS = {
    HISTORY: "/api/attendance/history",
  },
  RECOMMENDATIONS: "/api/recommendations",
+  NUTRITION: {
+    BASE: "/api/nutrition",
+    MEALS: "/api/nutrition/meals",
+    GET_BY_DATE: (date: string) => `/api/nutrition?date=${date}`,
+    GET_RANGE: (startDate: string, endDate: string) =>
+      `/api/nutrition?startDate=${startDate}&endDate=${endDate}`,
+  },
+  HYDRATION: {
+    BASE: "/api/hydration",
+    GET_BY_DATE: (date: string) => `/api/hydration?date=${date}`,
+    GET_RANGE: (startDate: string, endDate: string) =>
+      `/api/hydration?startDate=${startDate}&endDate=${endDate}`,
+  },
  FITNESS_GOALS: {
    LIST: "/api/fitness-goals",
    CREATE: "/api/fitness-goals",
@@ -0,0 +1,173 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
+import { useUser, useAuth } from "@clerk/clerk-expo";
+import {
+  getHydrationByDate,
+  saveDailyHydration,
+  type HydrationEntry,
+} from "../api/hydration";
+import log from "../utils/logger";
+
+interface HydrationContextValue {
+  hydration: HydrationEntry | null;
+  loading: boolean;
+  error: Error | null;
+  waterGoal: number;
+  todayTotal: number;
+  percentage: number;
+  addWater: (amount: number) => Promise<void>;
+  resetToday: () => Promise<void>;
+  setWaterGoal: (goal: number) => void;
+  refetch: () => Promise<void>;
+}
+
+const HydrationContext = createContext<HydrationContextValue | undefined>(
+  undefined,
+);
+
+export function HydrationProvider({ children }: { children: React.ReactNode }) {
+  const { user } = useUser();
+  const { getToken } = useAuth();
+  const [hydration, setHydration] = useState<HydrationEntry | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [waterGoal, setWaterGoal] = useState(2000); // Default goal: 2000ml
+
+  const today = new Date().toISOString().split("T")[0];
+
+  const fetchTodayHydration = useCallback(async () => {
+    if (!user?.id) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const token = await getToken();
+      const data = await getHydrationByDate(today, token);
+
+      if (data) {
+        setHydration(data);
+        if (data.waterGoal) {
+          setWaterGoal(data.waterGoal);
+        }
+      } else {
+        // No data for today yet
+        setHydration(null);
+      }
+
+      log.debug("Today's hydration fetched", { data });
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      log.error("Failed to fetch hydration", error);
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [user?.id, getToken, today]);
+
+  useEffect(() => {
+    fetchTodayHydration();
+  }, [fetchTodayHydration]);
+
+  const addWater = useCallback(
+    async (amount: number) => {
+      if (!user?.id) return;
+
+      try {
+        const token = await getToken();
+        const currentTotal = hydration?.totalWater || 0;
+        const newTotal = currentTotal + amount;
+
+        const entry = await saveDailyHydration(
+          {
+            date: today,
+            totalWater: newTotal,
+            waterGoal,
+            entries: [
+              ...(hydration?.entries || []),
+              { amount, time: new Date().toISOString() },
+            ],
+          },
+          token,
+        );
+
+        setHydration(entry);
+        log.debug("Water added successfully", { amount, newTotal });
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        log.error("Failed to add water", error);
+        setError(error);
+        throw error; // Re-throw so UI can handle it
+      }
+    },
+    [user?.id, getToken, today, hydration, waterGoal],
+  );
+
+  const resetToday = useCallback(async () => {
+    if (!user?.id) return;
+
+    try {
+      const token = await getToken();
+
+      await saveDailyHydration(
+        {
+          date: today,
+          totalWater: 0,
+          waterGoal,
+          entries: [],
+        },
+        token,
+      );
+
+      setHydration({
+        date: today,
+        totalWater: 0,
+        waterGoal,
+        entries: [],
+      });
+
+      log.debug("Hydration reset for today");
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      log.error("Failed to reset hydration", error);
+      setError(error);
+      throw error;
+    }
+  }, [user?.id, getToken, today, waterGoal]);
+
+  const todayTotal = hydration?.totalWater || 0;
+  const percentage =
+    waterGoal > 0 ? Math.round((todayTotal / waterGoal) * 100) : 0;
+
+  const value: HydrationContextValue = {
+    hydration,
+    loading,
+    error,
+    waterGoal,
+    todayTotal,
+    percentage,
+    addWater,
+    resetToday,
+    setWaterGoal,
+    refetch: fetchTodayHydration,
+  };
+
+  return (
+    <HydrationContext.Provider value={value}>
+      {children}
+    </HydrationContext.Provider>
+  );
+}
+
+export function useHydration() {
+  const context = useContext(HydrationContext);
+  if (context === undefined) {
+    throw new Error("useHydration must be used within a HydrationProvider");
+  }
+  return context;
+}
@@ -0,0 +1,190 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
+import { useUser, useAuth } from "@clerk/clerk-expo";
+import {
+  getNutritionByDate,
+  saveDailyNutrition,
+  addMealEntry,
+  getMealEntriesByDate,
+  type NutritionEntry,
+  type MealEntry,
+} from "../api/nutrition";
+import log from "../utils/logger";
+
+interface NutritionContextValue {
+  nutrition: NutritionEntry | null;
+  meals: MealEntry[];
+  loading: boolean;
+  error: Error | null;
+  calorieGoal: number;
+  todayCalories: number;
+  percentage: number;
+  addMeal: (
+    data: Omit<MealEntry, "id" | "createdAt" | "dailyNutritionId">,
+  ) => Promise<void>;
+  updateGoal: (goal: number) => void;
+  refetch: () => Promise<void>;
+}
+
+const NutritionContext = createContext<NutritionContextValue | undefined>(
+  undefined,
+);
+
+export function NutritionProvider({ children }: { children: React.ReactNode }) {
+  const { user } = useUser();
+  const { getToken } = useAuth();
+  const [nutrition, setNutrition] = useState<NutritionEntry | null>(null);
+  const [meals, setMeals] = useState<MealEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [calorieGoal, setCalorieGoal] = useState(2000); // Default goal: 2000 cal
+
+  const today = new Date().toISOString().split("T")[0];
+
+  const fetchTodayNutrition = useCallback(async () => {
+    if (!user?.id) return;
+
+    try {
+      setLoading(true);
+      setError(null);
+
+      const token = await getToken();
+
+      // Fetch both nutrition data and meal entries
+      const [nutritionData, mealsData] = await Promise.all([
+        getNutritionByDate(today, token),
+        getMealEntriesByDate(today, token),
+      ]);
+
+      if (nutritionData) {
+        setNutrition(nutritionData);
+        if (nutritionData.calorieGoal) {
+          setCalorieGoal(nutritionData.calorieGoal);
+        }
+      } else {
+        setNutrition(null);
+      }
+
+      setMeals(mealsData);
+      log.debug("Today's nutrition fetched", {
+        nutritionData,
+        mealsCount: mealsData.length,
+      });
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      log.error("Failed to fetch nutrition", error);
+      setError(error);
+    } finally {
+      setLoading(false);
+    }
+  }, [user?.id, getToken, today]);
+
+  useEffect(() => {
+    fetchTodayNutrition();
+  }, [fetchTodayNutrition]);
+
+  const addMeal = useCallback(
+    async (data: Omit<MealEntry, "id" | "createdAt" | "dailyNutritionId">) => {
+      if (!user?.id) return;
+
+      try {
+        const token = await getToken();
+
+        // Add the meal entry
+        const meal = await addMealEntry(data, token);
+
+        // Recalculate total calories
+        const currentTotal = nutrition?.totalCalories || 0;
+        const newTotal = currentTotal + data.calories;
+
+        // Update the daily nutrition
+        const updatedNutrition = await saveDailyNutrition(
+          {
+            date: today,
+            totalCalories: newTotal,
+            calorieGoal,
+            meals: [
+              ...(nutrition?.meals || []),
+              {
+                type: data.mealType,
+                name: data.foodName,
+                calories: data.calories,
+                time: new Date().toISOString(),
+              },
+            ],
+          },
+          token,
+        );
+
+        setNutrition(updatedNutrition);
+        setMeals([...meals, meal]);
+        log.debug("Meal added successfully", { meal, newTotal });
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        log.error("Failed to add meal", error);
+        setError(error);
+        throw error;
+      }
+    },
+    [user?.id, getToken, today, nutrition, calorieGoal, meals],
+  );
+
+  const updateGoal = useCallback(
+    async (goal: number) => {
+      setCalorieGoal(goal);
+      if (user?.id && nutrition) {
+        try {
+          const token = await getToken();
+          await saveDailyNutrition(
+            {
+              date: today,
+              totalCalories: nutrition.totalCalories,
+              calorieGoal: goal,
+              meals: nutrition.meals,
+            },
+            token,
+          );
+        } catch (err) {
+          log.error("Failed to update calorie goal", err);
+        }
+      }
+    },
+    [user?.id, nutrition, today, getToken],
+  );
+
+  const todayCalories = nutrition?.totalCalories || 0;
+  const percentage =
+    calorieGoal > 0 ? Math.round((todayCalories / calorieGoal) * 100) : 0;
+
+  const value: NutritionContextValue = {
+    nutrition,
+    meals,
+    loading,
+    error,
+    calorieGoal,
+    todayCalories,
+    percentage,
+    addMeal,
+    updateGoal,
+    refetch: fetchTodayNutrition,
+  };
+
+  return (
+    <NutritionContext.Provider value={value}>
+      {children}
+    </NutritionContext.Provider>
+  );
+}
+
+export function useNutrition() {
+  const context = useContext(NutritionContext);
+  if (context === undefined) {
+    throw new Error("useNutrition must be used within a NutritionProvider");
+  }
+  return context;
+}
@@ -1,7 +1,6 @@
 /**
- * FitAI Color System
- * Nord Color Palette - A minimal, arctic-inspired palette
- * https://www.nordtheme.com/
+ * FitAI Color System - BOLD MODERN
+ * Electric Blue palette with high-energy fitness app aesthetics
 */

 export interface ColorScheme {
@@ -12,6 +11,7 @@ export interface ColorScheme {

  // Accent Colors
  accent: string;
+  secondary: string;
  terracotta: string;
  sand: string;

@@ -21,6 +21,11 @@ export interface ColorScheme {
  danger: string;
  info: string;

+  // Activity Ring Colors
+  calories: string;
+  water: string;
+  workouts: string;
+
  // Neutrals
  background: string;
  surface: string;
@@ -39,97 +44,119 @@ export interface ColorScheme {
  overlay: string;
  overlayLight: string;

-  // Legacy compatibility (will be phased out)
+  // Gradients (as arrays)
+  primaryGradient: string[];
+  cardGradient: string[];
+
+  // Legacy compatibility
  white: string;
  black: string;
 }

 /**
- * Light Mode Color Palette
- * Nord Snow Storm (light backgrounds) with Polar Night (dark text)
+ * Light Mode - Bold & Energetic
 */
 export const lightColors: ColorScheme = {
-  // Primary Colors (Nord Frost - Aurora blue-green)
-  primary: "#88C0D0", // Nord Frost 8 (main actions, cyan)
-  primaryDark: "#5E81AC", // Nord Frost 10 (dark blue)
-  primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan)
+  // Primary Colors - Electric Blue
+  primary: "#0066FF",
+  primaryDark: "#0052CC",
+  primaryLight: "#3385FF",

  // Accent Colors
-  accent: "#81A1C1", // Nord Frost 9 (blue-gray)
-  terracotta: "#D08770", // Nord Aurora 12 (orange - replaces terracotta)
-  sand: "#EBCB8B", // Nord Aurora 13 (yellow - warm accent)
+  accent: "#7B2CBF", // Purple
+  secondary: "#FF3B7A", // Hot Pink
+  terracotta: "#FF6B35", // Neon Orange
+  sand: "#FFD60A", // Electric Yellow

-  // Status Colors
-  success: "#A3BE8C", // Nord Aurora 14 (green)
-  warning: "#EBCB8B", // Nord Aurora 13 (yellow)
-  danger: "#BF616A", // Nord Aurora 11 (red)
-  info: "#81A1C1", // Nord Frost 9 (blue)
+  // Status Colors - Vibrant
+  success: "#00D26A",
+  warning: "#FFB800",
+  danger: "#FF3B3B",
+  info: "#00B8D9",

-  // Neutrals (Snow Storm palette)
-  background: "#ECEFF4", // Nord Snow Storm 3 (lightest)
-  surface: "#E5E9F0", // Nord Snow Storm 2 (medium)
-  surfaceElevated: "#D8DEE9", // Nord Snow Storm 1 (slightly darker)
+  // Activity Ring Colors
+  calories: "#FF6B35", // Orange for calories
+  water: "#00B8D9", // Cyan for water
+  workouts: "#0066FF", // Blue for workouts

-  // Text (Polar Night palette)
-  textPrimary: "#2E3440", // Nord Polar Night 0 (darkest)
-  textSecondary: "#3B4252", // Nord Polar Night 1
-  textTertiary: "#4C566A", // Nord Polar Night 3
+  // Neutrals - Bold dark on light
+  background: "#F5F5F7",
+  surface: "#FFFFFF",
+  surfaceElevated: "#FFFFFF",
+
+  // Text - High contrast dark
+  textPrimary: "#1A1A1A",
+  textSecondary: "#4A4A4A",
+  textTertiary: "#8E8E93",

  // Borders
-  border: "#D8DEE9", // Nord Snow Storm 1
-  borderLight: "#E5E9F0", // Nord Snow Storm 2
+  border: "#E5E5EA",
+  borderLight: "#F0F0F5",

  // Overlays
-  overlay: "rgba(46, 52, 64, 0.5)", // Polar Night 0
-  overlayLight: "rgba(46, 52, 64, 0.05)",
+  overlay: "rgba(0, 0, 0, 0.5)",
+  overlayLight: "rgba(0, 0, 0, 0.03)",
+
+  // Gradients
+  primaryGradient: ["#0066FF", "#0052CC"],
+  cardGradient: ["#FFFFFF", "#F8F8FA"],

  // Legacy
-  white: "#ECEFF4",
-  black: "#2E3440",
+  white: "#FFFFFF",
+  black: "#1A1A1A",
 };

 /**
- * Dark Mode Color Palette
- * Nord Polar Night (dark backgrounds) with Snow Storm (light text)
+ * Dark Mode - Premium & Immersive
 */
 export const darkColors: ColorScheme = {
-  // Primary Colors (Nord Frost - adjusted for dark mode)
-  primary: "#88C0D0", // Nord Frost 8 (cyan - brighter on dark)
-  primaryDark: "#5E81AC", // Nord Frost 10 (dark blue)
-  primaryLight: "#8FBCBB", // Nord Frost 7 (pale cyan)
+  // Primary Colors - Electric Blue (brighter on dark)
+  primary: "#0A84FF",
+  primaryDark: "#0066FF",
+  primaryLight: "#5AC8FA",

  // Accent Colors
-  accent: "#81A1C1", // Nord Frost 9 (blue-gray)
-  terracotta: "#D08770", // Nord Aurora 12 (orange)
-  sand: "#EBCB8B", // Nord Aurora 13 (yellow)
+  accent: "#BF5AF2", // Purple
+  secondary: "#FF375F", // Hot Pink
+  terracotta: "#FF9500", // Orange
+  sand: "#FFD60A", // Yellow

  // Status Colors
-  success: "#A3BE8C", // Nord Aurora 14 (green)
-  warning: "#EBCB8B", // Nord Aurora 13 (yellow)
-  danger: "#BF616A", // Nord Aurora 11 (red)
-  info: "#81A1C1", // Nord Frost 9 (blue)
+  success: "#30D158",
+  warning: "#FFD60A",
+  danger: "#FF453A",
+  info: "#64D2FF",

-  // Neutrals (Polar Night palette)
-  background: "#2E3440", // Nord Polar Night 0 (darkest)
-  surface: "#3B4252", // Nord Polar Night 1 (medium dark)
-  surfaceElevated: "#434C5E", // Nord Polar Night 2 (lighter)
+  // Activity Ring Colors (even brighter for dark mode)
+  calories: "#FF9500",
+  water: "#64D2FF",
+  workouts: "#0A84FF",

-  // Text (Snow Storm palette)
-  textPrimary: "#ECEFF4", // Nord Snow Storm 3 (lightest)
-  textSecondary: "#E5E9F0", // Nord Snow Storm 2
-  textTertiary: "#D8DEE9", // Nord Snow Storm 1
+  // Neutrals - Dark backgrounds
+  background: "#000000",
+  surface: "#1C1C1E",
+  surfaceElevated: "#2C2C2E",
+
+  // Text - Bright on dark
+  textPrimary: "#FFFFFF",
+  textSecondary: "#EBEBF5",
+  textTertiary: "#8E8E93",

  // Borders
-  border: "#434C5E", // Nord Polar Night 2
-  borderLight: "#3B4252", // Nord Polar Night 1
+  border: "#38383A",
+  borderLight: "#48484A",

  // Overlays
  overlay: "rgba(0, 0, 0, 0.6)",
-  overlayLight: "rgba(236, 239, 244, 0.05)", // Snow Storm 3
+  overlayLight: "rgba(255, 255, 255, 0.05)",
+
+  // Gradients
+  primaryGradient: ["#0A84FF", "#0066FF"],
+  cardGradient: ["#1C1C1E", "#2C2C2E"],

  // Legacy
-  white: "#ECEFF4",
-  black: "#2E3440",
+  white: "#FFFFFF",
+  black: "#000000",
 };

 /**
Author	SHA1	Message	Date
dimitar	74f0d0dbed	user report gtound work	2026-03-19 03:37:15 +01:00
dimitar	1be2de05fa	todos	2026-03-19 01:49:07 +01:00
dimitar	1be7dc2858	user id -> user name in attendace	2026-03-19 01:37:10 +01:00
dimitar	36f52b42c6	ash	2026-03-19 01:32:18 +01:00
dimitar	3e30fae173	attendace, user stats	2026-03-19 01:29:09 +01:00
dimitar	d6a77fcd23	various fixes raw sql to drizzle	2026-03-19 00:57:04 +01:00
dimitar	ffd3aabc55	delete gym working	2026-03-19 00:44:39 +01:00
dimitar	8cac57ed67	db updated	2026-03-19 00:39:23 +01:00
dimitar	d4fae890bb	invitation flow finished	2026-03-18 23:58:14 +01:00
dimitar	0817e8e72b	invitation flow basis	2026-03-18 23:08:55 +01:00
dimitar	b1f01208fa	admin role enhancment basic invitation flow	2026-03-18 13:56:51 +01:00
dimitar	d112dbb122	rb fine tune	2026-03-18 13:14:47 +01:00
dimitar	7043487fc2	edit local user fix	2026-03-18 12:37:21 +01:00
dimitar	bb9c675421	setings page enhanced gym managment added	2026-03-18 06:23:40 +01:00
dimitar	624cdfc45c	role based auth implemented superadmin -> admin -> traniner	2026-03-18 06:06:01 +01:00
dimitar	16217f46ff	schema update	2026-03-18 04:27:08 +01:00
dimitar	cc2dbc3423	Merge branch 'adminUI'	2026-03-18 03:57:25 +01:00
dimitar	b1d6489c70	css	2026-03-18 03:55:28 +01:00
dimitar	0abb41f573	admin ui enhacement	2026-03-18 02:36:12 +01:00
dimitar	02c9681aca	performance improvments	2026-03-18 02:04:09 +01:00
dimitar	912981e3f3	dbb	2026-03-18 01:18:34 +01:00
dimitar	963404434a	db up	2026-03-18 01:06:55 +01:00
dimitar	7f22a39886	fitness profile fix	2026-03-18 00:35:21 +01:00
dimitar	0776517fb7	Merge branch 'anotherTake'	2026-03-12 20:21:41 +01:00
dimitar	064dafad57	refinenments	2026-03-12 20:19:48 +01:00
dimitar	5d6166df1b	redesign take 2 complete fix artefacts from previous dessign	2026-03-12 17:56:46 +01:00
dimitar	aba9b1395b	fitness goals on home screen update fix	2026-03-12 17:06:10 +01:00
dimitar	c3a41d2b32	actual fix	2026-03-12 16:58:14 +01:00
dimitar	254a30ff93	fitness profile validation error fixed	2026-03-12 16:45:38 +01:00