From 66ca1bcfea91e1238b17d8c46cbd4d9be4e1d97f Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 16:02:49 +0530
Subject: [PATCH 01/21] change: demogrpahic data schema change.

---
 api-service/api/openapi.yaml                 | 84 +++++++++++++++-----
 api-service/service/AuthenticationService.js | 15 +++-
 api-service/utils/dbSchemas.js               |  2 +-
 3 files changed, 75 insertions(+), 26 deletions(-)

diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index c390957..8a4a9e1 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -897,27 +897,6 @@ components:
         phone:
           type: string
           pattern: ^\+?[\d\s-]+$
-        gender:
-          type: string
-          nullable: true
-          description: User gender identity (e.g., 'male', 'female', 'non-binary', 'prefer_not_to_say')
-          example: "female"
-        incomeBracket:
-          type: string
-          nullable: true
-          description: User income bracket category (e.g., '<25k', '25k-50k', '50k-100k', '100k-200k', '>200k', 'prefer_not_to_say')
-          example: "50k-100k"
-        country:
-          type: string
-          nullable: true
-          description: User country of residence (ISO 3166-1 alpha-2 code)
-          example: "US"
-        age:
-          type: integer
-          format: int32
-          nullable: true
-          description: User age
-          example: 35
         privacySettings:
           type: object
           properties:
@@ -937,6 +916,8 @@ components:
               items:
                 type: string
               description: List of store IDs user has opted out from
+        demographicData:
+          $ref: "#/components/schemas/DemographicData"
         createdAt:
           type: string
           format: date-time
@@ -1571,6 +1552,67 @@ components:
         version:
           type: string
 
+    DemographicData:
+      type: object
+      description: User-provided and inferred demographic information
+      properties:
+        gender:
+          type: string
+          nullable: true
+          description: User gender identity
+          enum: [male, female, non-binary, prefer_not_to_say, null]
+          example: "female"
+        incomeBracket:
+          type: string
+          nullable: true
+          description: User income bracket category
+          enum:
+            [
+              "<25k",
+              "25k-50k",
+              "50k-100k",
+              "100k-200k",
+              ">200k",
+              "prefer_not_to_say",
+              null,
+            ]
+          example: "50k-100k"
+        country:
+          type: string
+          nullable: true
+          description: User country of residence (e.g., ISO 3166-1 alpha-2 code)
+          example: "US"
+        age:
+          type: integer
+          format: int32
+          nullable: true
+          description: User age
+          example: 35
+        inferredHasKids:
+          type: boolean
+          nullable: true
+          description: "Inferred: Does the user likely have children? (null if unknown)"
+        inferredRelationshipStatus:
+          type: string
+          nullable: true
+          description: "Inferred: User relationship status (null if unknown)"
+          enum: [single, relationship, married, null]
+        inferredEmploymentStatus:
+          type: string
+          nullable: true
+          description: "Inferred: User employment status (null if unknown)"
+          enum: [employed, unemployed, student, null]
+        inferredEducationLevel:
+          type: string
+          nullable: true
+          description: "Inferred: User education level (null if unknown)"
+          enum: [high_school, bachelors, masters, doctorate, null]
+        inferredAgeBracket:
+          type: string
+          nullable: true
+          description: "Inferred: User age bracket if age not provided (null if unknown)"
+          enum: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+", null]
+
     RecentUserDataEntry:
       type: object
       properties:
diff --git a/api-service/service/AuthenticationService.js b/api-service/service/AuthenticationService.js
index e3daed0..27c7ef7 100644
--- a/api-service/service/AuthenticationService.js
+++ b/api-service/service/AuthenticationService.js
@@ -100,10 +100,17 @@ exports.registerUser = async function (req, body) {
       username: userData.username || userData.nickname || userData.sub,
       email: userData.email,
       phone: userData.phone_number || null,
-      gender: gender || null, // Add new fields, defaulting to null if not provided
-      incomeBracket: incomeBracket || null,
-      country: country || null,
-      age: age || null,
+      demographicData: {
+        gender: gender || null,
+        incomeBracket: incomeBracket || null,
+        country: country || null,
+        age: age || null,
+        inferredHasKids: null,
+        inferredRelationshipStatus: null,
+        inferredEmploymentStatus: null,
+        inferredEducationLevel: null,
+        inferredAgeBracket: null,
+      },
       preferences: preferences || [],
       privacySettings: {
         dataSharingConsent,
diff --git a/api-service/utils/dbSchemas.js b/api-service/utils/dbSchemas.js
index 108d7a2..794573c 100644
--- a/api-service/utils/dbSchemas.js
+++ b/api-service/utils/dbSchemas.js
@@ -3,7 +3,7 @@
  */
 
 // Schema version tracking
-const SCHEMA_VERSION = '2.0.8'; // Incremented version
+const SCHEMA_VERSION = '2.0.9'; // Incremented version
 
 const userSchema = {
   validator: {

From 50db45fe5a647cf6768b37ab8026bb82b41f354f Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 16:03:05 +0530
Subject: [PATCH 02/21] feat: Refactor User demographic data handling to use a
 new DemographicData interface

---
 web/src/api/types/data-contracts.ts           | 77 ++++++++++++++-----
 web/src/pages/UserDashboard/UserDashboard.tsx |  9 +--
 .../UserDashboard/UserPreferencesPage.tsx     | 18 ++---
 3 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/web/src/api/types/data-contracts.ts b/web/src/api/types/data-contracts.ts
index 3f263ea..241bb8b 100644
--- a/web/src/api/types/data-contracts.ts
+++ b/web/src/api/types/data-contracts.ts
@@ -28,27 +28,6 @@ export interface User {
   username?: string;
   /** @pattern ^\+?[\d\s-]+$ */
   phone?: string;
-  /**
-   * User gender identity (e.g., 'male', 'female', 'non-binary', 'prefer_not_to_say')
-   * @example "female"
-   */
-  gender?: string | null;
-  /**
-   * User income bracket category (e.g., '<25k', '25k-50k', '50k-100k', '100k-200k', '>200k', 'prefer_not_to_say')
-   * @example "50k-100k"
-   */
-  incomeBracket?: string | null;
-  /**
-   * User country of residence (ISO 3166-1 alpha-2 code)
-   * @example "US"
-   */
-  country?: string | null;
-  /**
-   * User age
-   * @format int32
-   * @example 35
-   */
-  age?: number | null;
   privacySettings: {
     /** @default false */
     dataSharingConsent?: boolean;
@@ -59,6 +38,8 @@ export interface User {
     /** List of store IDs user has opted out from */
     optOutStores?: string[];
   };
+  /** User-provided and inferred demographic information */
+  demographicData?: DemographicData;
   /** @format date-time */
   createdAt?: string;
   /** @format date-time */
@@ -402,6 +383,60 @@ export interface Taxonomy {
   version: string;
 }
 
+/** User-provided and inferred demographic information */
+export interface DemographicData {
+  /**
+   * User gender identity
+   * @example "female"
+   */
+  gender?: "male" | "female" | "non-binary" | "prefer_not_to_say" | null;
+  /**
+   * User income bracket category
+   * @example "50k-100k"
+   */
+  incomeBracket?:
+    | "<25k"
+    | "25k-50k"
+    | "50k-100k"
+    | "100k-200k"
+    | ">200k"
+    | "prefer_not_to_say"
+    | null;
+  /**
+   * User country of residence (e.g., ISO 3166-1 alpha-2 code)
+   * @example "US"
+   */
+  country?: string | null;
+  /**
+   * User age
+   * @format int32
+   * @example 35
+   */
+  age?: number | null;
+  /** Inferred: Does the user likely have children? (null if unknown) */
+  inferredHasKids?: boolean | null;
+  /** Inferred: User relationship status (null if unknown) */
+  inferredRelationshipStatus?: "single" | "relationship" | "married" | null;
+  /** Inferred: User employment status (null if unknown) */
+  inferredEmploymentStatus?: "employed" | "unemployed" | "student" | null;
+  /** Inferred: User education level (null if unknown) */
+  inferredEducationLevel?:
+    | "high_school"
+    | "bachelors"
+    | "masters"
+    | "doctorate"
+    | null;
+  /** Inferred: User age bracket if age not provided (null if unknown) */
+  inferredAgeBracket?:
+    | "18-24"
+    | "25-34"
+    | "35-44"
+    | "45-54"
+    | "55-64"
+    | "65+"
+    | null;
+}
+
 export interface RecentUserDataEntry {
   /** The unique ID of the userData entry. */
   _id?: string;
diff --git a/web/src/pages/UserDashboard/UserDashboard.tsx b/web/src/pages/UserDashboard/UserDashboard.tsx
index 2a3c7ce..2ecee40 100644
--- a/web/src/pages/UserDashboard/UserDashboard.tsx
+++ b/web/src/pages/UserDashboard/UserDashboard.tsx
@@ -146,7 +146,6 @@ const renderCustomizedLabel = ({
   outerRadius,
   percent,
 }: CustomizedLabelProps) => {
-  // Use the defined interface
   const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
   const x = cx + radius * Math.cos(-midAngle * RADIAN);
   const y = cy + radius * Math.sin(-midAngle * RADIAN);
@@ -765,25 +764,25 @@ export default function UserDashboard() {
                             <DemoInfoCard
                               icon={HiOutlineUserCircle}
                               label="Gender"
-                              value={profile?.gender}
+                              value={profile?.demographicData?.gender}
                               isLoading={profileLoading}
                             />
                             <DemoInfoCard
                               icon={HiOutlineCake}
                               label="Age"
-                              value={profile?.age}
+                              value={profile?.demographicData?.age}
                               isLoading={profileLoading}
                             />
                             <DemoInfoCard
                               icon={HiOutlineGlobeAlt}
                               label="Country"
-                              value={profile?.country}
+                              value={profile?.demographicData?.country}
                               isLoading={profileLoading}
                             />
                             <DemoInfoCard
                               icon={HiOutlineCash}
                               label="Income"
-                              value={profile?.incomeBracket}
+                              value={profile?.demographicData?.incomeBracket}
                               isLoading={profileLoading}
                             />
                           </div>
diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index 000251b..d0b4c8a 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -143,15 +143,13 @@ const UserPreferencesPage: React.FC = () => {
     defaultValues: { category: "", attributes: {}, score: 50 },
   });
 
-  // --- Effects ---
-  // Reset demographics form when profile loads or editing starts/stops
   useEffect(() => {
     if (userProfile && !isEditingDemographics) {
       resetDemoForm({
-        gender: userProfile.gender || "",
-        age: userProfile.age || undefined,
-        country: userProfile.country || "",
-        incomeBracket: userProfile.incomeBracket || "",
+        gender: userProfile?.demographicData?.gender || "",
+        age: userProfile?.demographicData?.age || undefined,
+        country: userProfile?.demographicData?.country || "",
+        incomeBracket: userProfile?.demographicData?.incomeBracket || "",
       });
     }
   }, [userProfile, isEditingDemographics, resetDemoForm]);
@@ -420,25 +418,25 @@ const UserPreferencesPage: React.FC = () => {
               <DemoInfoCard
                 icon={HiOutlineUserCircle}
                 label="Gender"
-                value={userProfile?.gender}
+                value={userProfile?.demographicData?.gender}
                 isLoading={profileLoading}
               />
               <DemoInfoCard
                 icon={HiOutlineCake}
                 label="Age"
-                value={userProfile?.age}
+                value={userProfile?.demographicData?.age}
                 isLoading={profileLoading}
               />
               <DemoInfoCard
                 icon={HiOutlineGlobeAlt}
                 label="Country"
-                value={userProfile?.country}
+                value={userProfile?.demographicData?.country}
                 isLoading={profileLoading}
               />
               <DemoInfoCard
                 icon={HiOutlineCash}
                 label="Income"
-                value={userProfile?.incomeBracket}
+                value={userProfile?.demographicData?.incomeBracket}
                 isLoading={profileLoading}
               />
             </div>

From 351171cb3d6a26ee58dc09f60e505b2e0e127210 Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 17:30:56 +0530
Subject: [PATCH 03/21] feat: Enhance UserRegistrationForm and
 UserPreferencesPage with country selection and improved demographic handling

---
 .../components/auth/UserRegistrationForm.tsx  |  58 ++--
 web/src/data/countries.json                   | 248 ++++++++++++++++++
 .../UserDashboard/UserPreferencesPage.tsx     | 163 +++++++++---
 3 files changed, 414 insertions(+), 55 deletions(-)
 create mode 100644 web/src/data/countries.json

diff --git a/web/src/components/auth/UserRegistrationForm.tsx b/web/src/components/auth/UserRegistrationForm.tsx
index ad4951b..32cfa3f 100644
--- a/web/src/components/auth/UserRegistrationForm.tsx
+++ b/web/src/components/auth/UserRegistrationForm.tsx
@@ -3,23 +3,29 @@ import {
   Button,
   Checkbox,
   Label,
-  Modal, // Import Modal components
+  Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
-  Popover, // <-- Import Popover
-  Select, // <-- Import Select
-  TextInput, // <-- Import TextInput
+  Popover,
+  Select, // Already imported
+  TextInput,
 } from "flowbite-react";
 import { UserCreate } from "../../api/types/data-contracts";
 import LoadingSpinner from "../common/LoadingSpinner";
-import { HiCheckCircle, HiInformationCircle } from "react-icons/hi"; // Import icons
+import { HiCheckCircle, HiInformationCircle } from "react-icons/hi";
+import countryData from "../../data/countries.json";
 
 interface UserRegistrationFormProps {
   onSubmit: (userData: UserCreate) => void;
   isLoading: boolean;
 }
 
+interface CountryOption {
+  value: string;
+  label: string;
+}
+
 // Define options for selects
 const genderOptions = [
   { value: "", label: "Select Gender (Optional)" },
@@ -39,6 +45,20 @@ const incomeOptions = [
   { value: "prefer_not_to_say", label: "Prefer not to say" },
 ];
 
+// --- Transform the imported country data object into an array ---
+const typedCountryData: CountryOption[] = Object.entries(countryData).map(
+  ([code, name]) => ({ value: code, label: name }),
+);
+// Sort alphabetically by label (optional but good UX)
+typedCountryData.sort((a, b) => a.label.localeCompare(b.label));
+
+// --- Create the final country options array ---
+const countryOptions: CountryOption[] = [
+  { value: "", label: "Select Country (Optional)" },
+  ...typedCountryData, // Spread the transformed array
+];
+// --- End Country Options ---
+
 export function UserRegistrationForm({
   onSubmit,
   isLoading,
@@ -67,13 +87,11 @@ export function UserRegistrationForm({
     }
 
     const userData: UserCreate = {
-      // Use the state variable linked to the checkbox
       dataSharingConsent: dataSharingConsent,
-      preferences: [], // We can leave this empty for now
-      // Add demographic data, ensuring null if empty string or invalid number
+      preferences: [],
       gender: gender || null,
       incomeBracket: incomeBracket || null,
-      country: country || null,
+      country: country || null, // country state is already used here
       age: age !== null && !isNaN(age) ? Number(age) : null,
     };
 
@@ -92,7 +110,6 @@ export function UserRegistrationForm({
     setShowConsentModal(false);
   };
 
-  // Content for the popover
   const popoverContent = (
     <div className="w-64 p-3 text-sm text-gray-500 dark:text-gray-400">
       <p>
@@ -150,20 +167,27 @@ export function UserRegistrationForm({
               ))}
             </Select>
           </div>
-          {/* Country Input */}
+
+          {/* --- Country Select (Replaces TextInput) --- */}
           <div>
-            <Label htmlFor="country">Country (ISO Code)"</Label>
-            <TextInput
+            <Label htmlFor="country">Country</Label>
+            <Select
               id="country"
-              placeholder="e.g., US, CA, GB"
               value={country ?? ""}
               onChange={(e) =>
-                setCountry(e.target.value ? e.target.value.toUpperCase() : null)
+                setCountry(e.target.value ? e.target.value : null)
               }
-              maxLength={2} // ISO 3166-1 alpha-2
               className="mt-1"
-            />
+            >
+              {countryOptions.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </Select>
           </div>
+          {/* --- End Country Select --- */}
+
           {/* Age Input */}
           <div>
             <Label htmlFor="age">Age</Label>
diff --git a/web/src/data/countries.json b/web/src/data/countries.json
new file mode 100644
index 0000000..6f5df5c
--- /dev/null
+++ b/web/src/data/countries.json
@@ -0,0 +1,248 @@
+{
+  "AF": "Afghanistan",
+  "AX": "Aland Islands",
+  "AL": "Albania",
+  "DZ": "Algeria",
+  "AS": "American Samoa",
+  "AD": "Andorra",
+  "AO": "Angola",
+  "AI": "Anguilla",
+  "AQ": "Antarctica",
+  "AG": "Antigua And Barbuda",
+  "AR": "Argentina",
+  "AM": "Armenia",
+  "AW": "Aruba",
+  "AU": "Australia",
+  "AT": "Austria",
+  "AZ": "Azerbaijan",
+  "BS": "Bahamas",
+  "BH": "Bahrain",
+  "BD": "Bangladesh",
+  "BB": "Barbados",
+  "BY": "Belarus",
+  "BE": "Belgium",
+  "BZ": "Belize",
+  "BJ": "Benin",
+  "BM": "Bermuda",
+  "BT": "Bhutan",
+  "BO": "Bolivia",
+  "BA": "Bosnia And Herzegovina",
+  "BW": "Botswana",
+  "BV": "Bouvet Island",
+  "BR": "Brazil",
+  "IO": "British Indian Ocean Territory",
+  "BN": "Brunei Darussalam",
+  "BG": "Bulgaria",
+  "BF": "Burkina Faso",
+  "BI": "Burundi",
+  "KH": "Cambodia",
+  "CM": "Cameroon",
+  "CA": "Canada",
+  "CV": "Cape Verde",
+  "KY": "Cayman Islands",
+  "CF": "Central African Republic",
+  "TD": "Chad",
+  "CL": "Chile",
+  "CN": "China",
+  "CX": "Christmas Island",
+  "CC": "Cocos (Keeling) Islands",
+  "CO": "Colombia",
+  "KM": "Comoros",
+  "CG": "Congo",
+  "CD": "Congo, Democratic Republic",
+  "CK": "Cook Islands",
+  "CR": "Costa Rica",
+  "CI": "Cote D\"Ivoire",
+  "HR": "Croatia",
+  "CU": "Cuba",
+  "CY": "Cyprus",
+  "CZ": "Czech Republic",
+  "DK": "Denmark",
+  "DJ": "Djibouti",
+  "DM": "Dominica",
+  "DO": "Dominican Republic",
+  "EC": "Ecuador",
+  "EG": "Egypt",
+  "SV": "El Salvador",
+  "GQ": "Equatorial Guinea",
+  "ER": "Eritrea",
+  "EE": "Estonia",
+  "ET": "Ethiopia",
+  "FK": "Falkland Islands (Malvinas)",
+  "FO": "Faroe Islands",
+  "FJ": "Fiji",
+  "FI": "Finland",
+  "FR": "France",
+  "GF": "French Guiana",
+  "PF": "French Polynesia",
+  "TF": "French Southern Territories",
+  "GA": "Gabon",
+  "GM": "Gambia",
+  "GE": "Georgia",
+  "DE": "Germany",
+  "GH": "Ghana",
+  "GI": "Gibraltar",
+  "GR": "Greece",
+  "GL": "Greenland",
+  "GD": "Grenada",
+  "GP": "Guadeloupe",
+  "GU": "Guam",
+  "GT": "Guatemala",
+  "GG": "Guernsey",
+  "GN": "Guinea",
+  "GW": "Guinea-Bissau",
+  "GY": "Guyana",
+  "HT": "Haiti",
+  "HM": "Heard Island & Mcdonald Islands",
+  "VA": "Holy See (Vatican City State)",
+  "HN": "Honduras",
+  "HK": "Hong Kong",
+  "HU": "Hungary",
+  "IS": "Iceland",
+  "IN": "India",
+  "ID": "Indonesia",
+  "IR": "Iran, Islamic Republic Of",
+  "IQ": "Iraq",
+  "IE": "Ireland",
+  "IM": "Isle Of Man",
+  "IL": "Israel",
+  "IT": "Italy",
+  "JM": "Jamaica",
+  "JP": "Japan",
+  "JE": "Jersey",
+  "JO": "Jordan",
+  "KZ": "Kazakhstan",
+  "KE": "Kenya",
+  "KI": "Kiribati",
+  "KR": "Korea",
+  "KP": "North Korea",
+  "KW": "Kuwait",
+  "KG": "Kyrgyzstan",
+  "LA": "Lao People\"s Democratic Republic",
+  "LV": "Latvia",
+  "LB": "Lebanon",
+  "LS": "Lesotho",
+  "LR": "Liberia",
+  "LY": "Libyan Arab Jamahiriya",
+  "LI": "Liechtenstein",
+  "LT": "Lithuania",
+  "LU": "Luxembourg",
+  "MO": "Macao",
+  "MK": "Macedonia",
+  "MG": "Madagascar",
+  "MW": "Malawi",
+  "MY": "Malaysia",
+  "MV": "Maldives",
+  "ML": "Mali",
+  "MT": "Malta",
+  "MH": "Marshall Islands",
+  "MQ": "Martinique",
+  "MR": "Mauritania",
+  "MU": "Mauritius",
+  "YT": "Mayotte",
+  "MX": "Mexico",
+  "FM": "Micronesia, Federated States Of",
+  "MD": "Moldova",
+  "MC": "Monaco",
+  "MN": "Mongolia",
+  "ME": "Montenegro",
+  "MS": "Montserrat",
+  "MA": "Morocco",
+  "MZ": "Mozambique",
+  "MM": "Myanmar",
+  "NA": "Namibia",
+  "NR": "Nauru",
+  "NP": "Nepal",
+  "NL": "Netherlands",
+  "AN": "Netherlands Antilles",
+  "NC": "New Caledonia",
+  "NZ": "New Zealand",
+  "NI": "Nicaragua",
+  "NE": "Niger",
+  "NG": "Nigeria",
+  "NU": "Niue",
+  "NF": "Norfolk Island",
+  "MP": "Northern Mariana Islands",
+  "NO": "Norway",
+  "OM": "Oman",
+  "PK": "Pakistan",
+  "PW": "Palau",
+  "PS": "Palestinian Territory, Occupied",
+  "PA": "Panama",
+  "PG": "Papua New Guinea",
+  "PY": "Paraguay",
+  "PE": "Peru",
+  "PH": "Philippines",
+  "PN": "Pitcairn",
+  "PL": "Poland",
+  "PT": "Portugal",
+  "PR": "Puerto Rico",
+  "QA": "Qatar",
+  "RE": "Reunion",
+  "RO": "Romania",
+  "RU": "Russian Federation",
+  "RW": "Rwanda",
+  "BL": "Saint Barthelemy",
+  "SH": "Saint Helena",
+  "KN": "Saint Kitts And Nevis",
+  "LC": "Saint Lucia",
+  "MF": "Saint Martin",
+  "PM": "Saint Pierre And Miquelon",
+  "VC": "Saint Vincent And Grenadines",
+  "WS": "Samoa",
+  "SM": "San Marino",
+  "ST": "Sao Tome And Principe",
+  "SA": "Saudi Arabia",
+  "SN": "Senegal",
+  "RS": "Serbia",
+  "SC": "Seychelles",
+  "SL": "Sierra Leone",
+  "SG": "Singapore",
+  "SK": "Slovakia",
+  "SI": "Slovenia",
+  "SB": "Solomon Islands",
+  "SO": "Somalia",
+  "ZA": "South Africa",
+  "GS": "South Georgia And Sandwich Isl.",
+  "ES": "Spain",
+  "LK": "Sri Lanka",
+  "SD": "Sudan",
+  "SR": "Suriname",
+  "SJ": "Svalbard And Jan Mayen",
+  "SZ": "Swaziland",
+  "SE": "Sweden",
+  "CH": "Switzerland",
+  "SY": "Syrian Arab Republic",
+  "TW": "Taiwan",
+  "TJ": "Tajikistan",
+  "TZ": "Tanzania",
+  "TH": "Thailand",
+  "TL": "Timor-Leste",
+  "TG": "Togo",
+  "TK": "Tokelau",
+  "TO": "Tonga",
+  "TT": "Trinidad And Tobago",
+  "TN": "Tunisia",
+  "TR": "Turkey",
+  "TM": "Turkmenistan",
+  "TC": "Turks And Caicos Islands",
+  "TV": "Tuvalu",
+  "UG": "Uganda",
+  "UA": "Ukraine",
+  "AE": "United Arab Emirates",
+  "GB": "United Kingdom",
+  "US": "United States",
+  "UM": "United States Outlying Islands",
+  "UY": "Uruguay",
+  "UZ": "Uzbekistan",
+  "VU": "Vanuatu",
+  "VE": "Venezuela",
+  "VN": "Vietnam",
+  "VG": "Virgin Islands, British",
+  "VI": "Virgin Islands, U.S.",
+  "WF": "Wallis And Futuna",
+  "EH": "Western Sahara",
+  "YE": "Yemen",
+  "ZM": "Zambia",
+  "ZW": "Zimbabwe"
+}
diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index d0b4c8a..32f17dd 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -10,10 +10,10 @@ import {
   ModalFooter,
   Label,
   TextInput,
-  Select,
+  Select, // Already imported
   RangeSlider,
-  List, // Import List
-  ListItem, // Import ListItem
+  List,
+  ListItem,
 } from "flowbite-react";
 import {
   HiInformationCircle,
@@ -26,23 +26,23 @@ import {
   HiOutlineCake,
   HiOutlineGlobeAlt,
   HiOutlineCash,
-  // --- End Add icons ---
 } from "react-icons/hi";
-import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import {
   useUserProfile,
-  useUpdateUserProfile,
   useUserPreferences,
+  useUpdateUserProfile,
   useUpdateUserPreferences,
 } from "../../api/hooks/useUserHooks";
 import { useTaxonomy } from "../../api/hooks/useTaxonomyHooks";
-import LoadingSpinner from "../../components/common/LoadingSpinner";
-import ErrorDisplay from "../../components/common/ErrorDisplay";
 import {
   UserUpdate,
   PreferenceItem,
   TaxonomyCategory,
 } from "../../api/types/data-contracts";
+import LoadingSpinner from "../../components/common/LoadingSpinner";
+import ErrorDisplay from "../../components/common/ErrorDisplay";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
+import countryData from "../../data/countries.json"; // <-- Import country data
 
 // --- Form Types ---
 type DemographicsFormData = Pick<
@@ -55,12 +55,46 @@ type PreferenceFormData = {
   attributes?: Record<string, string | undefined>;
 };
 
-// --- Mini Demographic Card Component (Add this) ---
+// --- Define options for selects (copied from UserRegistrationForm) ---
+const genderOptions = [
+  { value: "", label: "Select Gender" },
+  { value: "male", label: "Male" },
+  { value: "female", label: "Female" },
+  { value: "non-binary", label: "Non-binary" },
+  { value: "prefer_not_to_say", label: "Prefer not to say" },
+];
+
+const incomeOptions = [
+  { value: "", label: "Select Income Bracket" }, // Make placeholder less optional here
+  { value: "<25k", label: "< $25,000" },
+  { value: "25k-50k", label: "$25,000 - $49,999" },
+  { value: "50k-100k", label: "$50,000 - $99,999" },
+  { value: "100k-200k", label: "$100,000 - $199,999" },
+  { value: ">200k", label: "> $200,000" },
+  { value: "prefer_not_to_say", label: "Prefer not to say" },
+];
+
+// --- Country Options (copied from UserRegistrationForm) ---
+interface CountryOption {
+  value: string;
+  label: string;
+}
+const typedCountryData: CountryOption[] = Object.entries(countryData).map(
+  ([code, name]) => ({ value: code, label: name }),
+);
+typedCountryData.sort((a, b) => a.label.localeCompare(b.label));
+const countryOptions: CountryOption[] = [
+  { value: "", label: "Select Country" }, // Make placeholder less optional here
+  ...typedCountryData,
+];
+// --- End Country Options ---
+
+// --- Mini Demographic Card Component (Keep existing) ---
 interface DemoInfoCardProps {
   icon: React.ElementType;
   label: string;
   value: string | number | null | undefined;
-  isLoading?: boolean; // Optional loading state if needed later
+  isLoading?: boolean;
 }
 
 const DemoInfoCard: React.FC<DemoInfoCardProps> = ({
@@ -88,7 +122,7 @@ const DemoInfoCard: React.FC<DemoInfoCardProps> = ({
 // --- End Mini Demographic Card Component ---
 
 const UserPreferencesPage: React.FC = () => {
-  // --- Data Fetching ---
+  // --- Data Fetching (Keep existing) ---
   const {
     data: userProfile,
     isLoading: profileLoading,
@@ -105,7 +139,7 @@ const UserPreferencesPage: React.FC = () => {
     error: taxonomyError,
   } = useTaxonomy();
 
-  // --- Mutations ---
+  // --- Mutations (Keep existing) ---
   const {
     mutate: updateProfile,
     isPending: isUpdatingProfile,
@@ -117,7 +151,7 @@ const UserPreferencesPage: React.FC = () => {
     error: updatePreferencesError,
   } = useUpdateUserPreferences();
 
-  // --- State ---
+  // --- State (Keep existing) ---
   const [isEditingDemographics, setIsEditingDemographics] = useState(false);
   const [showPreferenceModal, setShowPreferenceModal] = useState(false);
   const [editingPreferenceIndex, setEditingPreferenceIndex] = useState<
@@ -234,17 +268,31 @@ const UserPreferencesPage: React.FC = () => {
 
   // --- Handlers ---
   const onDemoSubmit: SubmitHandler<DemographicsFormData> = (data) => {
-    // Filter out empty strings before sending
-    const payload: Partial<DemographicsFormData> = {};
-    if (data.gender) payload.gender = data.gender;
-    if (data.age) payload.age = data.age;
-    if (data.country) payload.country = data.country;
-    if (data.incomeBracket) payload.incomeBracket = data.incomeBracket;
-
-    updateProfile(payload as UserUpdate, {
-      // Cast as UserUpdate
-      onSuccess: () => setIsEditingDemographics(false),
-    });
+    // Filter out empty strings or nulls before sending
+    const payload: Partial<UserUpdate> = {}; // Use UserUpdate for payload type
+    if (data.gender && data.gender !== "") payload.gender = data.gender;
+    else payload.gender = null; // Explicitly set to null if empty
+
+    if (data.age !== undefined && data.age !== null && !isNaN(data.age))
+      payload.age = Number(data.age);
+    else payload.age = null; // Explicitly set to null if empty/invalid
+
+    if (data.country && data.country !== "") payload.country = data.country;
+    else payload.country = null; // Explicitly set to null if empty
+
+    if (data.incomeBracket && data.incomeBracket !== "")
+      payload.incomeBracket = data.incomeBracket;
+    else payload.incomeBracket = null; // Explicitly set to null if empty
+
+    // Only submit if there are actual changes
+    if (Object.keys(payload).length > 0) {
+      updateProfile(payload as UserUpdate, {
+        onSuccess: () => setIsEditingDemographics(false),
+      });
+    } else {
+      // No changes detected, just exit edit mode
+      setIsEditingDemographics(false);
+    }
   };
 
   const onPrefSubmit: SubmitHandler<PreferenceFormData> = (data) => {
@@ -361,13 +409,21 @@ const UserPreferencesPage: React.FC = () => {
               onSubmit={handleDemoSubmit(onDemoSubmit)}
               className="mt-4 space-y-4" // Use space-y for consistent spacing
             >
+              {/* --- Gender Select --- */}
               <div>
                 <Label htmlFor="gender">Gender</Label>
-                <TextInput
+                <Select
                   id="gender"
-                  {...registerDemo("gender")}
-                  placeholder="e.g., Male, Female, Non-binary"
-                />
+                  {...registerDemo("gender")} // Register the select
+                  className="mt-1"
+                  defaultValue={userProfile?.demographicData?.gender || ""} // Set default value for reset
+                >
+                  {genderOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
               </div>
               <div>
                 <Label htmlFor="age">Age</Label>
@@ -376,28 +432,57 @@ const UserPreferencesPage: React.FC = () => {
                   type="number"
                   {...registerDemo("age", { valueAsNumber: true })}
                   placeholder="e.g., 30"
+                  min="0" // Add min value
+                  className="mt-1"
                 />
               </div>
               <div>
                 <Label htmlFor="country">Country</Label>
-                <TextInput
+                <Select
                   id="country"
-                  {...registerDemo("country")}
-                  placeholder="e.g., USA, Canada"
-                />
+                  {...registerDemo("country")} // Register the select
+                  className="mt-1"
+                  defaultValue={userProfile?.demographicData?.country || ""} // Set default value
+                >
+                  {countryOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
               </div>
+              {/* --- Income Bracket Select --- */}
               <div>
                 <Label htmlFor="incomeBracket">Income Bracket</Label>
-                <TextInput
+                <Select
                   id="incomeBracket"
-                  {...registerDemo("incomeBracket")}
-                  placeholder="e.g., $50k-$75k, High"
-                />
+                  {...registerDemo("incomeBracket")} // Register the select
+                  className="mt-1"
+                  defaultValue={
+                    userProfile?.demographicData?.incomeBracket || ""
+                  } // Set default value for reset
+                >
+                  {incomeOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
               </div>
               <div className="mt-6 flex justify-end gap-3">
                 <Button
                   color="gray"
-                  onClick={() => setIsEditingDemographics(false)}
+                  onClick={() => {
+                    setIsEditingDemographics(false);
+                    // Reset form to original values on cancel
+                    resetDemoForm({
+                      gender: userProfile?.demographicData?.gender || "",
+                      age: userProfile?.demographicData?.age || undefined,
+                      country: userProfile?.demographicData?.country || "",
+                      incomeBracket:
+                        userProfile?.demographicData?.incomeBracket || "",
+                    });
+                  }}
                   disabled={isMutating}
                 >
                   Cancel
@@ -414,7 +499,8 @@ const UserPreferencesPage: React.FC = () => {
               </div>
             </form>
           ) : (
-            <div className="mt-4 space-y-3 text-sm">
+            // --- DISPLAY VIEW ---
+            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
               <DemoInfoCard
                 icon={HiOutlineUserCircle}
                 label="Gender"
@@ -587,6 +673,7 @@ const UserPreferencesPage: React.FC = () => {
                   Select a category...
                 </option>
                 {Array.from(categoryMap.values())
+                  .filter((cat) => cat.id) // Ensure category has an ID
                   .sort((a, b) => a.name.localeCompare(b.name))
                   .map((cat) => (
                     <option key={cat.id} value={cat.id}>

From 0800c2bcb0b33b1e75b03a3d2d4c396a9fdb8ee8 Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 17:36:14 +0530
Subject: [PATCH 04/21] feat: Update demographic inference functions to accept
 userData documents and streamline cache invalidation process

---
 .../app/services/demographicInference.py      | 68 ++++++++++---------
 .../app/services/preferenceProcessor.py       | 31 ++++-----
 2 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/ml-service/app/services/demographicInference.py b/ml-service/app/services/demographicInference.py
index cf80305..99e2454 100644
--- a/ml-service/app/services/demographicInference.py
+++ b/ml-service/app/services/demographicInference.py
@@ -57,22 +57,32 @@
 
 
 # --- Helper Function to Extract Text ---
-def _extract_text_from_entries(entries: List[Dict[str, Any]]) -> List[str]:
-    """Extracts relevant text (item names, search queries) from entries."""
+# MODIFIED: Now accepts a list of userData documents
+def _extract_text_from_user_data_docs(user_data_docs: List[Dict[str, Any]]) -> List[str]:
+    """Extracts relevant text (item names, search queries) from a list of userData documents."""
     texts = []
-    for entry in entries:
-        if entry.get("dataType") == "purchase":
-            texts.extend([item.get("name", "").lower() for item in entry.get("items", [])])
-        elif entry.get("dataType") == "search":
-            texts.append(entry.get("query", "").lower())
+    for doc in user_data_docs:
+        # Each doc has an 'entries' list
+        for entry in doc.get("entries", []):
+            # Process purchase items within each entry
+            if doc.get("dataType") == "purchase": # Check dataType at the document level
+                texts.extend([item.get("name", "").lower() for item in entry.get("items", [])])
+            # Process search query within each entry
+            elif doc.get("dataType") == "search": # Check dataType at the document level
+                texts.append(entry.get("query", "").lower())
+            # Handle cases where dataType might be missing or different
+            # else:
+            #     logger.warning(f"Unknown or missing dataType in userData document: {doc.get('_id')}")
     return [text for text in texts if text] # Filter out empty strings
 
 # --- Inference Functions ---
 
-async def infer_has_kids(entries: List[Dict[str, Any]]) -> Optional[bool]:
+# MODIFIED: Pass the list of userData documents directly
+async def infer_has_kids(user_data_docs: List[Dict[str, Any]]) -> Optional[bool]:
     """Infer if user has kids based on purchase/search keywords."""
     kid_evidence_count = 0
-    texts = _extract_text_from_entries(entries)
+    # MODIFIED: Call the updated helper function
+    texts = _extract_text_from_user_data_docs(user_data_docs)
     logger.debug(f"Inferring 'has_kids' from {len(texts)} text entries.")
     for text in texts:
         if any(keyword in text for keyword in KIDS_KEYWORDS):
@@ -85,12 +95,14 @@ async def infer_has_kids(entries: List[Dict[str, Any]]) -> Optional[bool]:
     logger.debug(f"Inferring 'has_kids' = None (evidence count: {kid_evidence_count})")
     return None # Not enough evidence
 
-async def infer_relationship_status(entries: List[Dict[str, Any]]) -> Optional[str]:
+# MODIFIED: Pass the list of userData documents directly
+async def infer_relationship_status(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
     """Infer relationship status (single, relationship, married) based on keywords."""
     married_evidence = 0
     relationship_evidence = 0
     single_evidence = 0 # Less reliable
-    texts = _extract_text_from_entries(entries)
+    # MODIFIED: Call the updated helper function
+    texts = _extract_text_from_user_data_docs(user_data_docs)
     logger.debug(f"Inferring 'relationship_status' from {len(texts)} text entries.")
 
     for text in texts:
@@ -120,12 +132,13 @@ async def infer_relationship_status(entries: List[Dict[str, Any]]) -> Optional[s
 
 # --- NEW Inference Functions ---
 
-async def infer_employment_status(entries: List[Dict[str, Any]]) -> Optional[str]:
+# MODIFIED: Pass the list of userData documents directly
+async def infer_employment_status(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
     """Infer employment status (employed, student, unemployed) based on keywords."""
     student_evidence = 0
     employment_evidence = 0
-    # Inferring 'unemployed' directly from keywords is very difficult/unreliable
-    texts = _extract_text_from_entries(entries)
+    # MODIFIED: Call the updated helper function
+    texts = _extract_text_from_user_data_docs(user_data_docs)
     logger.debug(f"Inferring 'employment_status' from {len(texts)} text entries.")
 
     for text in texts:
@@ -148,12 +161,14 @@ async def infer_employment_status(entries: List[Dict[str, Any]]) -> Optional[str
     logger.debug("Inferring 'employment_status' = None (insufficient evidence)")
     return None # Not enough evidence
 
-async def infer_education_level(entries: List[Dict[str, Any]]) -> Optional[str]:
+# MODIFIED: Pass the list of userData documents directly
+async def infer_education_level(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
     """Infer education level (high_school, bachelors, masters, doctorate) - Very Speculative."""
     doctorate_evidence = 0
     masters_evidence = 0
     bachelors_evidence = 0
-    texts = _extract_text_from_entries(entries)
+    # MODIFIED: Call the updated helper function
+    texts = _extract_text_from_user_data_docs(user_data_docs)
     logger.debug(f"Inferring 'education_level' from {len(texts)} text entries.")
 
     for text in texts:
@@ -182,12 +197,14 @@ async def infer_education_level(entries: List[Dict[str, Any]]) -> Optional[str]:
     logger.debug("Inferring 'education_level' = None (insufficient evidence)")
     return None # Very uncertain
 
-async def infer_age_bracket(entries: List[Dict[str, Any]]) -> Optional[str]:
+# MODIFIED: Pass the list of userData documents directly
+async def infer_age_bracket(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
     """Infer age bracket based on keywords - EXTREMELY SPECULATIVE AND UNRELIABLE."""
     young_adult_evidence = 0
     mid_career_evidence = 0
     senior_evidence = 0
-    texts = _extract_text_from_entries(entries)
+    # MODIFIED: Call the updated helper function
+    texts = _extract_text_from_user_data_docs(user_data_docs)
     logger.debug(f"Inferring 'age_bracket' from {len(texts)} text entries.")
 
     for text in texts:
@@ -299,21 +316,6 @@ async def run_inference_for_user(user_id: str, email: str, db, limit: int = 50)
                 updated = True
                 logger.info(f"Inference: Successfully updated user document for {email}")
 
-                # --- Invalidate Caches on Successful Update ---
-                auth0_id = user.get("auth0Id")
-                if auth0_id:
-                    # Invalidate user data and general preferences
-                    await invalidate_cache(f"{CACHE_KEYS['USER_DATA']}{auth0_id}")
-                    await invalidate_cache(f"{CACHE_KEYS['PREFERENCES']}{auth0_id}")
-                    logger.info(f"Inference: Invalidated USER_DATA and PREFERENCES cache for {auth0_id}")
-
-                    # Invalidate store-specific preferences for opt-in stores
-                    if user.get("privacySettings", {}).get("optInStores"):
-                        user_object_id_str = str(user_object_id)
-                        for store_id in user["privacySettings"]["optInStores"]:
-                            await invalidate_cache(f"{CACHE_KEYS['STORE_PREFERENCES']}{user_object_id_str}:{store_id}")
-                        logger.info(f"Inference: Invalidated STORE_PREFERENCES caches for {auth0_id}")
-                # --- End Cache Invalidation ---
             else:
                  logger.warning(f"Inference: Update payload generated but DB modify count was 0 for {email}. Payload: {update_payload}")
         else:
diff --git a/ml-service/app/services/preferenceProcessor.py b/ml-service/app/services/preferenceProcessor.py
index 2300526..7ae867e 100644
--- a/ml-service/app/services/preferenceProcessor.py
+++ b/ml-service/app/services/preferenceProcessor.py
@@ -170,28 +170,25 @@ async def process_user_data(data: UserDataEntry, db) -> UserPreferences:
     # --- End Demographic Inference ---
 
 
-    # Invalidate user preferences cache using auth0Id (if not already done by inference)
-    # This ensures caches are cleared even if inference didn't run or update
+    # Invalidate relevant caches unconditionally after processing and inference attempt
     auth0_id = user.get("auth0Id")
     if auth0_id:
-        # Check if inference already invalidated caches for this user
-        if not inference_updated_user:
-            logger.info(f"Running post-processing cache invalidation for {auth0_id} as inference didn't update.")
-            await invalidate_cache(f"{CACHE_KEYS['PREFERENCES']}{auth0_id}")
-            logger.info(f"Invalidated PREFERENCES cache for user {auth0_id} (post-processing)")
-
-            # Invalidate store-specific caches if opt-in stores exist
-            if user.get("privacySettings", {}).get("optInStores"):
-                for store_id in user["privacySettings"]["optInStores"]:
-                     store_pref_key = f"{CACHE_KEYS['STORE_PREFERENCES']}{user_id}:{store_id}"
-                     await invalidate_cache(store_pref_key)
-                logger.info(f"Invalidated STORE_PREFERENCES caches for user {auth0_id} (post-processing)")
-        else:
-             logger.info(f"Skipping post-processing cache invalidation as inference already handled it for {auth0_id}")
+        logger.info(f"Running post-processing cache invalidation for {auth0_id}.")
+        # Invalidate general user data and preferences
+        await invalidate_cache(f"{CACHE_KEYS['USER_DATA']}{auth0_id}")
+        await invalidate_cache(f"{CACHE_KEYS['PREFERENCES']}{auth0_id}")
+        logger.info(f"Invalidated USER_DATA and PREFERENCES caches for user {auth0_id} (post-processing)")
+
+        # Invalidate store-specific caches if opt-in stores exist
+        if user.get("privacySettings", {}).get("optInStores"):
+            user_object_id_str = str(user["_id"]) # Use user_id from the fetched user object
+            for store_id in user["privacySettings"]["optInStores"]:
+                 store_pref_key = f"{CACHE_KEYS['STORE_PREFERENCES']}{user_object_id_str}:{store_id}"
+                 await invalidate_cache(store_pref_key)
+            logger.info(f"Invalidated STORE_PREFERENCES caches for user {auth0_id} (post-processing)")
     else:
         logger.warning(f"Cannot invalidate caches for user {email} as auth0Id is missing.")
 
-
     # Return updated preferences in the expected format
     return UserPreferences(
         user_id=user_id,

From 857817dc726b3301f647dd9774d06c8a0cd5092c Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 18:11:08 +0530
Subject: [PATCH 05/21] feat: Enhance demographic data handling with
 user-provided fields and verification flags

---
 api-service/api/openapi.yaml                 | 113 +++++++++++++++----
 api-service/service/AuthenticationService.js |   9 ++
 api-service/service/UserProfileService.js    |  68 +++++++++--
 api-service/utils/dbSchemas.js               |  50 ++++++--
 web/src/api/types/data-contracts.ts          |  86 +++++++++++---
 5 files changed, 268 insertions(+), 58 deletions(-)

diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index 8a4a9e1..8311ba6 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -1060,23 +1060,58 @@ components:
               items:
                 type: string
                 description: List of store IDs the user has opted out of sharing data with
-        gender:
-          type: string
-          nullable: true
-          description: User gender identity
-        incomeBracket:
-          type: string
-          nullable: true
-          description: User income bracket category
-        country:
-          type: string
-          nullable: true
-          description: User country of residence (ISO 3166-1 alpha-2 code)
-        age:
-          type: integer
-          format: int32
-          nullable: true
-          description: User age
+        demographicData:
+          type: object
+          description: Updatable demographic information (user-provided and verification flags).
+          properties:
+            # User-provided fields
+            gender:
+              type: string
+              nullable: true
+              description: "User-provided gender identity"
+              enum: [male, female, non-binary, prefer_not_to_say, null]
+            incomeBracket:
+              type: string
+              nullable: true
+              description: "User-provided income bracket category"
+              enum:
+                [
+                  "<25k",
+                  "25k-50k",
+                  "50k-100k",
+                  "100k-200k",
+                  ">200k",
+                  "prefer_not_to_say",
+                  null,
+                ]
+            country:
+              type: string
+              nullable: true
+              description: "User-provided country of residence (e.g., ISO 3166-1 alpha-2 code)"
+            age:
+              type: integer
+              format: int32
+              nullable: true
+              description: "User-provided age. Setting this clears inferredAgeBracket."
+            # Verification flags for inferred fields
+            hasKidsIsVerified:
+              type: boolean
+              description: "Set to true by the user to confirm the inferred 'hasKids' status."
+            relationshipStatusIsVerified:
+              type: boolean
+              description: "Set to true by the user to confirm the inferred 'relationshipStatus'."
+            employmentStatusIsVerified:
+              type: boolean
+              description: "Set to true by the user to confirm the inferred 'employmentStatus'."
+            educationLevelIsVerified:
+              type: boolean
+              description: "Set to true by the user to confirm the inferred 'educationLevel'."
+            ageBracketIsVerified:
+              type: boolean
+              description: "Set to true by the user to confirm the inferred 'ageBracket'. Only applicable if 'age' is not set."
+            genderIsVerified:
+              type: boolean
+              description: "Set to true by the user to confirm the inferred 'gender'. Only applicable if 'gender' is not set."
 
     ApiKey:
       type: object
@@ -1556,16 +1591,17 @@ components:
       type: object
       description: User-provided and inferred demographic information
       properties:
+        # --- User-Provided ---
         gender:
           type: string
           nullable: true
-          description: User gender identity
+          description: "User-provided gender identity" # Keep as user-provided
           enum: [male, female, non-binary, prefer_not_to_say, null]
           example: "female"
         incomeBracket:
           type: string
           nullable: true
-          description: User income bracket category
+          description: "User-provided income bracket category"
           enum:
             [
               "<25k",
@@ -1580,39 +1616,68 @@ components:
         country:
           type: string
           nullable: true
-          description: User country of residence (e.g., ISO 3166-1 alpha-2 code)
+          description: "User-provided country of residence (e.g., ISO 3166-1 alpha-2 code)"
           example: "US"
         age:
           type: integer
           format: int32
           nullable: true
-          description: User age
+          description: "User-provided age" # Keep as user-provided
           example: 35
+        # --- Inferred fields ---
         inferredHasKids:
           type: boolean
           nullable: true
           description: "Inferred: Does the user likely have children? (null if unknown)"
+        hasKidsIsVerified: # NEW
+          type: boolean
+          description: "Flag indicating if inferredHasKids has been verified by the user"
+          default: false
         inferredRelationshipStatus:
           type: string
           nullable: true
           description: "Inferred: User relationship status (null if unknown)"
           enum: [single, relationship, married, null]
+        relationshipStatusIsVerified: # NEW
+          type: boolean
+          description: "Flag indicating if inferredRelationshipStatus has been verified by the user"
+          default: false
         inferredEmploymentStatus:
           type: string
           nullable: true
           description: "Inferred: User employment status (null if unknown)"
           enum: [employed, unemployed, student, null]
+        employmentStatusIsVerified: # NEW
+          type: boolean
+          description: "Flag indicating if inferredEmploymentStatus has been verified by the user"
+          default: false
         inferredEducationLevel:
           type: string
           nullable: true
           description: "Inferred: User education level (null if unknown)"
           enum: [high_school, bachelors, masters, doctorate, null]
-        inferredAgeBracket:
+        educationLevelIsVerified: # NEW
+          type: boolean
+          description: "Flag indicating if inferredEducationLevel has been verified by the user"
+          default: false
+        inferredAgeBracket: # NEW (separate from user-provided 'age')
           type: string
           nullable: true
-          description: "Inferred: User age bracket if age not provided (null if unknown)"
+          description: "Inferred: User age bracket (null if unknown or age provided)"
           enum: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+", null]
-
+        ageBracketIsVerified: # NEW
+          type: boolean
+          description: "Flag indicating if inferredAgeBracket has been verified by the user"
+          default: false
+        inferredGender: # NEW (separate from user-provided 'gender')
+          type: string
+          nullable: true
+          description: "Inferred: User gender identity (null if unknown or gender provided)"
+          enum: [male, female, non-binary, null] # Note: 'prefer_not_to_say' is user-only
+        genderIsVerified: # NEW
+          type: boolean
+          description: "Flag indicating if inferredGender has been verified by the user"
+          default: false
     RecentUserDataEntry:
       type: object
       properties:
diff --git a/api-service/service/AuthenticationService.js b/api-service/service/AuthenticationService.js
index 27c7ef7..e271f6e 100644
--- a/api-service/service/AuthenticationService.js
+++ b/api-service/service/AuthenticationService.js
@@ -101,15 +101,24 @@ exports.registerUser = async function (req, body) {
       email: userData.email,
       phone: userData.phone_number || null,
       demographicData: {
+        // User provided
         gender: gender || null,
         incomeBracket: incomeBracket || null,
         country: country || null,
         age: age || null,
+        // Inferred (initialize as null, verified as false)
         inferredHasKids: null,
+        hasKidsIsVerified: false, // Initialize
         inferredRelationshipStatus: null,
+        relationshipStatusIsVerified: false, // Initialize
         inferredEmploymentStatus: null,
+        employmentStatusIsVerified: false, // Initialize
         inferredEducationLevel: null,
+        educationLevelIsVerified: false, // Initialize
         inferredAgeBracket: null,
+        ageBracketIsVerified: false, // Initialize
+        inferredGender: null,
+        genderIsVerified: false, // Initialize
       },
       preferences: preferences || [],
       privacySettings: {
diff --git a/api-service/service/UserProfileService.js b/api-service/service/UserProfileService.js
index 53ba8fa..d376a22 100644
--- a/api-service/service/UserProfileService.js
+++ b/api-service/service/UserProfileService.js
@@ -110,31 +110,77 @@ exports.updateUserProfile = async function (req, body) {
 
     // --- Update Demographic Data ---
     // Use dot notation to set fields within the demographicData object
-    if (body.gender !== undefined) {
-        updateData['demographicData.gender'] = body.gender;
+
+    // User-provided fields (existing logic)
+    if (body.demographicData?.gender !== undefined) { // Check within demographicData object
+        updateData['demographicData.gender'] = body.demographicData.gender;
         demographicsChanged = true;
+        // If gender is being set by user, clear the inferred gender and its verification
+        updateData['demographicData.inferredGender'] = null;
+        updateData['demographicData.genderIsVerified'] = false; // Reset verification if user changes main field
     }
-    if (body.incomeBracket !== undefined) {
-        updateData['demographicData.incomeBracket'] = body.incomeBracket;
+    if (body.demographicData?.incomeBracket !== undefined) {
+        updateData['demographicData.incomeBracket'] = body.demographicData.incomeBracket;
         demographicsChanged = true;
     }
-    if (body.country !== undefined) {
-        updateData['demographicData.country'] = body.country;
+    if (body.demographicData?.country !== undefined) {
+        updateData['demographicData.country'] = body.demographicData.country;
         demographicsChanged = true;
     }
-    if (body.age !== undefined) {
-        // Ensure age is null or an integer
-        const ageValue = body.age === null ? null : parseInt(body.age);
+    if (body.demographicData?.age !== undefined) {
+        const ageValue = body.demographicData.age === null ? null : parseInt(body.demographicData.age);
         if (ageValue === null || !isNaN(ageValue)) {
              updateData['demographicData.age'] = ageValue;
              demographicsChanged = true;
-             // If age is being set, clear the inferred age bracket
+             // If age is being set by user, clear the inferred age bracket and its verification
              updateData['demographicData.inferredAgeBracket'] = null;
+             updateData['demographicData.ageBracketIsVerified'] = false; // Reset verification
         } else {
-            console.warn(`Invalid age value provided for user ${auth0UserId}: ${body.age}`);
+            console.warn(`Invalid age value provided for user ${auth0UserId}: ${body.demographicData.age}`);
             // Optionally return a 400 error here
         }
     }
+
+    // --- NEW: Handle Verification Flags ---
+    // Only allow setting verification flags via this endpoint
+    if (body.demographicData?.hasKidsIsVerified !== undefined && typeof body.demographicData.hasKidsIsVerified === 'boolean') {
+        updateData['demographicData.hasKidsIsVerified'] = body.demographicData.hasKidsIsVerified;
+        demographicsChanged = true; // Consider verification change as demographic change for cache invalidation
+    }
+    if (body.demographicData?.relationshipStatusIsVerified !== undefined && typeof body.demographicData.relationshipStatusIsVerified === 'boolean') {
+        updateData['demographicData.relationshipStatusIsVerified'] = body.demographicData.relationshipStatusIsVerified;
+        demographicsChanged = true;
+    }
+    if (body.demographicData?.employmentStatusIsVerified !== undefined && typeof body.demographicData.employmentStatusIsVerified === 'boolean') {
+        updateData['demographicData.employmentStatusIsVerified'] = body.demographicData.employmentStatusIsVerified;
+        demographicsChanged = true;
+    }
+    if (body.demographicData?.educationLevelIsVerified !== undefined && typeof body.demographicData.educationLevelIsVerified === 'boolean') {
+        updateData['demographicData.educationLevelIsVerified'] = body.demographicData.educationLevelIsVerified;
+        demographicsChanged = true;
+    }
+    if (body.demographicData?.ageBracketIsVerified !== undefined && typeof body.demographicData.ageBracketIsVerified === 'boolean') {
+        // Only allow verifying inferred age bracket if user hasn't provided their specific age
+        const currentUserDoc = await db.collection('users').findOne({ auth0Id: auth0UserId }, { projection: { 'demographicData.age': 1 } });
+        if (currentUserDoc?.demographicData?.age === null) {
+            updateData['demographicData.ageBracketIsVerified'] = body.demographicData.ageBracketIsVerified;
+            demographicsChanged = true;
+        } else {
+            console.warn(`User ${auth0UserId} attempted to verify age bracket when specific age is set.`);
+            // Do not update the flag if specific age is provided
+        }
+    }
+    if (body.demographicData?.genderIsVerified !== undefined && typeof body.demographicData.genderIsVerified === 'boolean') {
+         // Only allow verifying inferred gender if user hasn't provided their specific gender
+        const currentUserDoc = await db.collection('users').findOne({ auth0Id: auth0UserId }, { projection: { 'demographicData.gender': 1 } });
+         if (currentUserDoc?.demographicData?.gender === null) {
+            updateData['demographicData.genderIsVerified'] = body.demographicData.genderIsVerified;
+            demographicsChanged = true;
+         } else {
+            console.warn(`User ${auth0UserId} attempted to verify inferred gender when specific gender is set.`);
+            // Do not update the flag if specific gender is provided
+         }
+    }
     // --- End Update Demographic Data ---
 
 
diff --git a/api-service/utils/dbSchemas.js b/api-service/utils/dbSchemas.js
index 794573c..16fa1bb 100644
--- a/api-service/utils/dbSchemas.js
+++ b/api-service/utils/dbSchemas.js
@@ -37,50 +37,86 @@ const userSchema = {
           bsonType: 'object',
           description: 'User-provided and inferred demographic information',
           properties: {
+            // --- User-Provided ---
             gender: {
               bsonType: ['string', 'null'],
-              description: 'User gender identity',
+              description: 'User-provided gender identity', // Clarified description
               enum: ['male', 'female', 'non-binary', 'prefer_not_to_say', null]
             },
             incomeBracket: {
               bsonType: ['string', 'null'],
-              description: 'User income bracket category',
+              description: 'User-provided income bracket category', // Clarified description
               enum: ['<25k', '25k-50k', '50k-100k', '100k-200k', '>200k', 'prefer_not_to_say', null]
             },
             country: {
               bsonType: ['string', 'null'],
-              description: 'User country of residence (e.g., ISO 3166-1 alpha-2 code)',
+              description: 'User-provided country of residence (e.g., ISO 3166-1 alpha-2 code)', // Clarified description
             },
             age: {
               bsonType: ['int', 'null'],
-              description: 'User age',
+              description: 'User-provided age', // Clarified description
               minimum: 0,
             },
-            // --- Inferred fields within demographicData ---
+            // --- Inferred fields ---
             inferredHasKids: {
               bsonType: ['bool', 'null'],
               description: 'Inferred: Does the user likely have children? (null if unknown)',
             },
+            hasKidsIsVerified: { // NEW verification flag
+              bsonType: 'bool',
+              description: 'Flag indicating if inferredHasKids has been verified by the user',
+              default: false // Default to false
+            },
             inferredRelationshipStatus: {
               bsonType: ['string', 'null'],
               description: 'Inferred: User relationship status (null if unknown)',
               enum: ['single', 'relationship', 'married', null],
             },
+            relationshipStatusIsVerified: { // NEW verification flag
+              bsonType: 'bool',
+              description: 'Flag indicating if inferredRelationshipStatus has been verified by the user',
+              default: false
+            },
             inferredEmploymentStatus: {
               bsonType: ['string', 'null'],
               description: 'Inferred: User employment status (null if unknown)',
               enum: ['employed', 'unemployed', 'student', null],
             },
+            employmentStatusIsVerified: { // NEW verification flag
+              bsonType: 'bool',
+              description: 'Flag indicating if inferredEmploymentStatus has been verified by the user',
+              default: false
+            },
             inferredEducationLevel: {
               bsonType: ['string', 'null'],
               description: 'Inferred: User education level (null if unknown)',
               enum: ['high_school', 'bachelors', 'masters', 'doctorate', null],
             },
-            inferredAgeBracket: {
+            educationLevelIsVerified: { // NEW verification flag
+              bsonType: 'bool',
+              description: 'Flag indicating if inferredEducationLevel has been verified by the user',
+              default: false
+            },
+            inferredAgeBracket: { // Kept separate from user-provided 'age'
               bsonType: ['string', 'null'],
-              description: 'Inferred: User age bracket if age not provided (null if unknown)',
+              description: 'Inferred: User age bracket (null if unknown or age provided)', // Clarified description
               enum: ['18-24', '25-34', '35-44', '45-54', '55-64', '65+', null],
             },
+            ageBracketIsVerified: { // NEW verification flag
+              bsonType: 'bool',
+              description: 'Flag indicating if inferredAgeBracket has been verified by the user',
+              default: false
+            },
+            inferredGender: { // NEW inferred field
+              bsonType: ['string', 'null'],
+              description: 'Inferred: User gender identity (null if unknown or gender provided)',
+              enum: ['male', 'female', 'non-binary', null], // Note: 'prefer_not_to_say' is user-only
+            },
+            genderIsVerified: { // NEW verification flag
+              bsonType: 'bool',
+              description: 'Flag indicating if inferredGender has been verified by the user',
+              default: false
+            },
           }
         },
         // --- End: Demographic Data Object ---
diff --git a/web/src/api/types/data-contracts.ts b/web/src/api/types/data-contracts.ts
index 241bb8b..56ed96c 100644
--- a/web/src/api/types/data-contracts.ts
+++ b/web/src/api/types/data-contracts.ts
@@ -105,17 +105,39 @@ export interface UserUpdate {
     optInStores?: string[];
     optOutStores?: string[];
   };
-  /** User gender identity */
-  gender?: string | null;
-  /** User income bracket category */
-  incomeBracket?: string | null;
-  /** User country of residence (ISO 3166-1 alpha-2 code) */
-  country?: string | null;
-  /**
-   * User age
-   * @format int32
-   */
-  age?: number | null;
+  /** Updatable demographic information (user-provided and verification flags). */
+  demographicData?: {
+    /** User-provided gender identity */
+    gender?: "male" | "female" | "non-binary" | "prefer_not_to_say" | null;
+    /** User-provided income bracket category */
+    incomeBracket?:
+      | "<25k"
+      | "25k-50k"
+      | "50k-100k"
+      | "100k-200k"
+      | ">200k"
+      | "prefer_not_to_say"
+      | null;
+    /** User-provided country of residence (e.g., ISO 3166-1 alpha-2 code) */
+    country?: string | null;
+    /**
+     * User-provided age. Setting this clears inferredAgeBracket.
+     * @format int32
+     */
+    age?: number | null;
+    /** Set to true by the user to confirm the inferred 'hasKids' status. */
+    hasKidsIsVerified?: boolean;
+    /** Set to true by the user to confirm the inferred 'relationshipStatus'. */
+    relationshipStatusIsVerified?: boolean;
+    /** Set to true by the user to confirm the inferred 'employmentStatus'. */
+    employmentStatusIsVerified?: boolean;
+    /** Set to true by the user to confirm the inferred 'educationLevel'. */
+    educationLevelIsVerified?: boolean;
+    /** Set to true by the user to confirm the inferred 'ageBracket'. Only applicable if 'age' is not set. */
+    ageBracketIsVerified?: boolean;
+    /** Set to true by the user to confirm the inferred 'gender'. Only applicable if 'gender' is not set. */
+    genderIsVerified?: boolean;
+  };
 }
 
 export interface ApiKey {
@@ -386,12 +408,12 @@ export interface Taxonomy {
 /** User-provided and inferred demographic information */
 export interface DemographicData {
   /**
-   * User gender identity
+   * User-provided gender identity
    * @example "female"
    */
   gender?: "male" | "female" | "non-binary" | "prefer_not_to_say" | null;
   /**
-   * User income bracket category
+   * User-provided income bracket category
    * @example "50k-100k"
    */
   incomeBracket?:
@@ -403,22 +425,37 @@ export interface DemographicData {
     | "prefer_not_to_say"
     | null;
   /**
-   * User country of residence (e.g., ISO 3166-1 alpha-2 code)
+   * User-provided country of residence (e.g., ISO 3166-1 alpha-2 code)
    * @example "US"
    */
   country?: string | null;
   /**
-   * User age
+   * User-provided age
    * @format int32
    * @example 35
    */
   age?: number | null;
   /** Inferred: Does the user likely have children? (null if unknown) */
   inferredHasKids?: boolean | null;
+  /**
+   * Flag indicating if inferredHasKids has been verified by the user
+   * @default false
+   */
+  hasKidsIsVerified?: boolean;
   /** Inferred: User relationship status (null if unknown) */
   inferredRelationshipStatus?: "single" | "relationship" | "married" | null;
+  /**
+   * Flag indicating if inferredRelationshipStatus has been verified by the user
+   * @default false
+   */
+  relationshipStatusIsVerified?: boolean;
   /** Inferred: User employment status (null if unknown) */
   inferredEmploymentStatus?: "employed" | "unemployed" | "student" | null;
+  /**
+   * Flag indicating if inferredEmploymentStatus has been verified by the user
+   * @default false
+   */
+  employmentStatusIsVerified?: boolean;
   /** Inferred: User education level (null if unknown) */
   inferredEducationLevel?:
     | "high_school"
@@ -426,7 +463,12 @@ export interface DemographicData {
     | "masters"
     | "doctorate"
     | null;
-  /** Inferred: User age bracket if age not provided (null if unknown) */
+  /**
+   * Flag indicating if inferredEducationLevel has been verified by the user
+   * @default false
+   */
+  educationLevelIsVerified?: boolean;
+  /** Inferred: User age bracket (null if unknown or age provided) */
   inferredAgeBracket?:
     | "18-24"
     | "25-34"
@@ -435,6 +477,18 @@ export interface DemographicData {
     | "55-64"
     | "65+"
     | null;
+  /**
+   * Flag indicating if inferredAgeBracket has been verified by the user
+   * @default false
+   */
+  ageBracketIsVerified?: boolean;
+  /** Inferred: User gender identity (null if unknown or gender provided) */
+  inferredGender?: "male" | "female" | "non-binary" | null;
+  /**
+   * Flag indicating if inferredGender has been verified by the user
+   * @default false
+   */
+  genderIsVerified?: boolean;
 }
 
 export interface RecentUserDataEntry {

From a72f71ac3676abb55543c9579560ee38db6ccefc Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 18:38:42 +0530
Subject: [PATCH 06/21] feat: Implement hybrid demographic inference with
 enhanced keyword and semantic matching

---
 api-service/utils/dbSchemas.js                |   2 +-
 .../app/services/demographicInference.py      | 662 +++++++++++-------
 2 files changed, 410 insertions(+), 254 deletions(-)

diff --git a/api-service/utils/dbSchemas.js b/api-service/utils/dbSchemas.js
index 16fa1bb..c34feb5 100644
--- a/api-service/utils/dbSchemas.js
+++ b/api-service/utils/dbSchemas.js
@@ -3,7 +3,7 @@
  */
 
 // Schema version tracking
-const SCHEMA_VERSION = '2.0.9'; // Incremented version
+const SCHEMA_VERSION = '3.0.0'; // Incremented version
 
 const userSchema = {
   validator: {
diff --git a/ml-service/app/services/demographicInference.py b/ml-service/app/services/demographicInference.py
index 99e2454..9d30368 100644
--- a/ml-service/app/services/demographicInference.py
+++ b/ml-service/app/services/demographicInference.py
@@ -2,62 +2,203 @@
 from collections import defaultdict
 from typing import List, Dict, Any, Optional, Tuple
 from bson import ObjectId
-from datetime import datetime # Import datetime
-from app.utils.redis_util import invalidate_cache, CACHE_KEYS # Import cache utilities
+from datetime import datetime
+from app.utils.redis_util import invalidate_cache, CACHE_KEYS
+from sentence_transformers import util
+import numpy as np
+from app.services.taxonomyService import get_taxonomy_service
 
 logger = logging.getLogger(__name__)
 
-# --- Keyword Definitions (Examples - Expand significantly) ---
-KIDS_KEYWORDS = {
-    "baby", "toddler", "child", "kid", "infant", "diaper", "stroller",
-    "crib", "formula", "nursery", "maternity", "school supplies", "toy",
-    "lego", "barbie", "playstation", "nintendo", # Be careful with broad terms
-}
-RELATIONSHIP_KEYWORDS = {
-    "wedding", "engagement", "anniversary", "couple", "partner", "spouse",
-    "boyfriend", "girlfriend", "husband", "wife", "romantic", "valentine",
-}
-MARRIED_KEYWORDS = {
-    "wedding", "anniversary", "spouse", "husband", "wife", "married",
-}
-SINGLE_KEYWORDS = {
-    "single", "dating app", "matchmaking",
+# --- Semantic Configuration ---
+SEMANTIC_SIMILARITY_THRESHOLD = 0.60
+EVIDENCE_THRESHOLD_DEFAULT = 2.0 # Use float for weighted evidence
+EVIDENCE_THRESHOLD_MARRIED = 1.5 # Lower threshold for strong marriage signals
+EVIDENCE_THRESHOLD_EDUCATION = 1.5 # Lower threshold for specific education terms
+
+# --- NEW: Rule-Based Keyword Configuration ---
+# Keywords should be lowercase
+KEYWORD_RULES = {
+    "has_kids": {
+        True: {"baby", "infant", "maternity", "diaper", "stroller", "crib", "newborn", "toddler", "child's toy"}
+    },
+    "relationship_status": {
+        "married": {"wedding", "anniversary", "spouse", "husband", "wife"},
+        "relationship": {"boyfriend", "girlfriend", "dating", "partner gift", "couples"}
+        # 'single' is hard to determine via keywords reliably
+    },
+    "employment_status": {
+        "student": {"student loan", "internship", "university", "college", "textbook", "dorm"},
+        "unemployed": {"resume help", "job search"} # Still weak signals
+    },
+    "education_level": {
+        "doctorate": {"phd", "dissertation", "postdoc"},
+        "masters": {"master's degree", "thesis"},
+        "bachelors": {"bachelor's degree", "undergrad"},
+        # 'high_school' is too ambiguous
+    },
+    "gender": { # Use with extreme caution - high potential for bias
+        "male": {"men's", "for him", "grooming kit men"},
+        "female": {"women's", "for her", "makeup set", "feminine hygiene"}
+    }
+    # No reliable keywords for age_bracket
 }
 
-# --- NEW Keyword Sets ---
-EMPLOYMENT_KEYWORDS = {
-    "job search", "linkedin", "resume", "interview suit", "office supplies",
-    "business travel", "conference", "work laptop", "unemployment benefits",
-    "career fair", "networking event",
-}
-STUDENT_KEYWORDS = {
-    "student discount", "university", "college", "textbook", "dorm room",
-    "student loan", "internship", "campus", "study guide", "backpack",
-    "school supplies", # Overlap with KIDS_KEYWORDS, context matters
-}
-EDUCATION_KEYWORDS = {
-    "university", "college", "bachelor's degree", "master's degree", "phd",
-    "doctorate", "thesis", "dissertation", "academic journal", "textbook",
-    "research paper", "graduate school",
-}
-# Age bracket keywords are very unreliable, use with extreme caution or alternative methods
-AGE_BRACKET_YOUNG_ADULT_KEYWORDS = { # Approx 18-24
-    "college", "university", "first apartment", "internship", "study abroad",
-    "spring break", "starter job",
-}
-AGE_BRACKET_MID_CAREER_KEYWORDS = { # Approx 35-54
-    "mortgage", "kids' college fund", "management training", "midlife crisis", # Joking, but maybe?
-    "retirement planning", "executive",
-}
-AGE_BRACKET_SENIOR_KEYWORDS = { # Approx 65+
-    "retirement", "pension", "senior discount", "medicare", "grandchild",
-    "assisted living", "downsizing home",
+# --- NEW: Evidence Weights ---
+RULE_MATCH_WEIGHT = 1.5
+SEMANTIC_MATCH_WEIGHT = 1.0
+# --- End NEW Configuration ---
+
+
+# --- Semantic Target Descriptions (Keep as is) ---
+# Keys should match the field names in DemographicData (e.g., inferredHasKids -> has_kids)
+SEMANTIC_TARGETS = {
+    "has_kids": {
+        True: [
+            "items for babies or infants",
+            "children's toys and games",
+            "parenting supplies",
+            "school-related items for kids",
+            "maternity wear or products",
+            "family activities or vacations",
+        ],
+        # False is hard to infer semantically, rely on lack of True evidence
+    },
+    "relationship_status": {
+        "married": [
+            "wedding gifts or planning items",
+            "anniversary presents",
+            "items for spouse or partner",
+            "joint home purchases", # Requires more context than just text
+            "husband or wife related items",
+        ],
+        "relationship": [
+            "gifts for partner or significant other",
+            "couples items or activities",
+            "romantic presents",
+            "dating related items", # Can overlap with single, use threshold
+            "items for boyfriend or girlfriend",
+        ],
+        "single": [
+            "items for one person",
+            "dating app subscriptions", # Very specific if found
+            "solo travel or activities",
+            "self-care items focused on independence",
+        ]
+    },
+    "employment_status": {
+        "employed": [
+            "professional work attire",
+            "office supplies or equipment",
+            "business travel items",
+            "commute-related products",
+            "career development materials",
+        ],
+        "student": [
+            "textbooks or course materials",
+            "university or college supplies",
+            "dorm room furnishings",
+            "student discounts or events",
+            "internship-related items",
+            "study aids",
+        ],
+        "unemployed": [ # Very hard to infer reliably from purchases/searches
+            "job searching resources",
+            "resume building services",
+            # "unemployment benefit applications" # Unlikely purchase/search
+        ]
+    },
+    "education_level": {
+        "doctorate": [
+            "phd program materials",
+            "dissertation research tools",
+            "academic conference registration",
+            "postdoctoral research supplies",
+        ],
+        "masters": [
+            "master's degree program materials",
+            "graduate school textbooks",
+            "thesis writing resources",
+        ],
+        "bachelors": [
+            "bachelor's degree program materials",
+            "undergraduate textbooks",
+            "college supplies",
+            "university merchandise",
+        ],
+        "high_school": [ # Very hard to infer post-facto
+            "high school supplies", # Overlaps heavily
+            # "ged preparation"
+        ]
+    },
+    "age_bracket": { # Extremely unreliable, keep targets broad
+        "18-24": [
+            "college student items",
+            "first apartment essentials",
+            "entry-level job search",
+            "youth fashion trends",
+            "music festivals or concerts",
+        ],
+        "25-34": [
+            "young professional items",
+            "starting a family supplies", # Overlaps kids
+            "new homeowner items",
+            "advanced career development",
+            "travel and experiences",
+        ],
+        "35-44": [
+            "mid-career professional items",
+            "family-oriented products", # Overlaps kids
+            "home renovation supplies",
+            "investment or retirement planning",
+        ],
+        "45-54": [
+            "senior management or executive items",
+            "planning for children's college",
+            "luxury travel or hobbies",
+            "health and wellness focus",
+        ],
+        "55-64": [
+            "pre-retirement planning",
+            "downsizing home items",
+            "travel for seniors",
+            "health monitoring devices",
+            "grandparent gifts",
+        ],
+        "65+": [
+            "retirement living items",
+            "senior health care products",
+            "hobby supplies for retirees",
+            "accessible travel",
+            "gifts for grandchildren",
+        ]
+    },
+    "gender": { # Also potentially unreliable/sensitive
+         "male": [
+             "men's clothing and accessories",
+             "grooming products typically for men",
+             "hobbies stereotypically associated with men", # Be very careful with stereotypes
+             "gifts for him",
+         ],
+         "female": [
+             "women's clothing and accessories",
+             "makeup and cosmetics",
+             "skincare products typically for women",
+             "hobbies stereotypically associated with women", # Be very careful
+             "gifts for her",
+             "feminine hygiene products",
+         ],
+         "non-binary": [ # Extremely difficult to infer semantically from general purchases
+             "gender-neutral clothing",
+             "unisex products",
+             # "lgbtq+ related merchandise" # Can be indicative but not definitive
+         ]
+    }
 }
-# --- End NEW Keyword Sets ---
+# --- End Semantic Target Descriptions ---
 
 
-# --- Helper Function to Extract Text ---
-# MODIFIED: Now accepts a list of userData documents
+# --- Helper Function to Extract Text (Keep as is) ---
 def _extract_text_from_user_data_docs(user_data_docs: List[Dict[str, Any]]) -> List[str]:
     """Extracts relevant text (item names, search queries) from a list of userData documents."""
     texts = []
@@ -66,182 +207,177 @@ def _extract_text_from_user_data_docs(user_data_docs: List[Dict[str, Any]]) -> L
         for entry in doc.get("entries", []):
             # Process purchase items within each entry
             if doc.get("dataType") == "purchase": # Check dataType at the document level
-                texts.extend([item.get("name", "").lower() for item in entry.get("items", [])])
+                for item in entry.get("items", []):
+                    if item.get("name"):
+                        texts.append(item["name"].lower())
             # Process search query within each entry
             elif doc.get("dataType") == "search": # Check dataType at the document level
-                texts.append(entry.get("query", "").lower())
-            # Handle cases where dataType might be missing or different
-            # else:
-            #     logger.warning(f"Unknown or missing dataType in userData document: {doc.get('_id')}")
+                if entry.get("query"):
+                    texts.append(entry["query"].lower())
     return [text for text in texts if text] # Filter out empty strings
 
-# --- Inference Functions ---
 
-# MODIFIED: Pass the list of userData documents directly
-async def infer_has_kids(user_data_docs: List[Dict[str, Any]]) -> Optional[bool]:
-    """Infer if user has kids based on purchase/search keywords."""
-    kid_evidence_count = 0
-    # MODIFIED: Call the updated helper function
-    texts = _extract_text_from_user_data_docs(user_data_docs)
-    logger.debug(f"Inferring 'has_kids' from {len(texts)} text entries.")
-    for text in texts:
-        if any(keyword in text for keyword in KIDS_KEYWORDS):
-            kid_evidence_count += 1
-            logger.debug(f"Kid keyword found: {text}")
-
-    if kid_evidence_count >= 2: # Require multiple pieces of evidence
-        logger.debug(f"Inferring 'has_kids' = True (evidence count: {kid_evidence_count})")
-        return True
-    logger.debug(f"Inferring 'has_kids' = None (evidence count: {kid_evidence_count})")
-    return None # Not enough evidence
-
-# MODIFIED: Pass the list of userData documents directly
-async def infer_relationship_status(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
-    """Infer relationship status (single, relationship, married) based on keywords."""
-    married_evidence = 0
-    relationship_evidence = 0
-    single_evidence = 0 # Less reliable
-    # MODIFIED: Call the updated helper function
-    texts = _extract_text_from_user_data_docs(user_data_docs)
-    logger.debug(f"Inferring 'relationship_status' from {len(texts)} text entries.")
+# --- Hybrid Inference Helper (Modified) ---
+async def _run_hybrid_inference_for_attribute( # Renamed for clarity
+    attribute_name: str,
+    user_data_docs: List[Dict[str, Any]],
+    taxonomy_service # Pass the service instance
+) -> Optional[Any]:
+    """
+    Generic function to infer a demographic attribute using HYBRID (rule + semantic) approach.
 
-    for text in texts:
-        # Check married first for priority
-        if any(keyword in text for keyword in MARRIED_KEYWORDS):
-            married_evidence += 1
-            logger.debug(f"Married keyword found: {text}")
-        elif any(keyword in text for keyword in RELATIONSHIP_KEYWORDS):
-            relationship_evidence += 1
-            logger.debug(f"Relationship keyword found: {text}")
-        elif any(keyword in text for keyword in SINGLE_KEYWORDS):
-             single_evidence += 1
-             logger.debug(f"Single keyword found: {text}")
-
-    # Prioritize married > relationship > single based on evidence threshold
-    if married_evidence >= 1: # Lower threshold for specific events like wedding
-        logger.debug(f"Inferring 'relationship_status' = 'married' (evidence count: {married_evidence})")
-        return "married"
-    elif relationship_evidence >= 2:
-        logger.debug(f"Inferring 'relationship_status' = 'relationship' (evidence count: {relationship_evidence})")
-        return "relationship"
-    # elif single_evidence >= 1: # Be very cautious enabling this
-    #    logger.debug(f"Inferring 'relationship_status' = 'single' (evidence count: {single_evidence})")
-    #    return "single"
-    logger.debug("Inferring 'relationship_status' = None (insufficient evidence)")
-    return None # Not enough evidence
-
-# --- NEW Inference Functions ---
-
-# MODIFIED: Pass the list of userData documents directly
-async def infer_employment_status(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
-    """Infer employment status (employed, student, unemployed) based on keywords."""
-    student_evidence = 0
-    employment_evidence = 0
-    # MODIFIED: Call the updated helper function
-    texts = _extract_text_from_user_data_docs(user_data_docs)
-    logger.debug(f"Inferring 'employment_status' from {len(texts)} text entries.")
+    Args:
+        attribute_name: The key from SEMANTIC_TARGETS/KEYWORD_RULES.
+        user_data_docs: List of user data documents.
+        taxonomy_service: Initialized TaxonomyService instance.
 
-    for text in texts:
-        # Check student first due to potential overlap (e.g., "school supplies")
-        if any(keyword in text for keyword in STUDENT_KEYWORDS):
-            student_evidence += 1
-            logger.debug(f"Student keyword found: {text}")
-        elif any(keyword in text for keyword in EMPLOYMENT_KEYWORDS):
-            employment_evidence += 1
-            logger.debug(f"Employment keyword found: {text}")
-
-    # Prioritize student if strong evidence, otherwise employed
-    if student_evidence >= 2:
-        logger.debug(f"Inferring 'employment_status' = 'student' (evidence count: {student_evidence})")
-        return "student"
-    elif employment_evidence >= 2:
-        logger.debug(f"Inferring 'employment_status' = 'employed' (evidence count: {employment_evidence})")
-        return "employed"
-    # Add more sophisticated logic? Check for conflicting terms?
-    logger.debug("Inferring 'employment_status' = None (insufficient evidence)")
-    return None # Not enough evidence
-
-# MODIFIED: Pass the list of userData documents directly
-async def infer_education_level(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
-    """Infer education level (high_school, bachelors, masters, doctorate) - Very Speculative."""
-    doctorate_evidence = 0
-    masters_evidence = 0
-    bachelors_evidence = 0
-    # MODIFIED: Call the updated helper function
+    Returns:
+        The inferred value or None if insufficient evidence.
+    """
     texts = _extract_text_from_user_data_docs(user_data_docs)
-    logger.debug(f"Inferring 'education_level' from {len(texts)} text entries.")
+    if not texts:
+        logger.debug(f"Hybrid Inference ({attribute_name}): No text entries found.")
+        return None
+
+    logger.debug(f"Hybrid Inference ({attribute_name}): Processing {len(texts)} text entries.")
+
+    # --- Prepare Semantic Targets (if needed) ---
+    semantic_target_map = SEMANTIC_TARGETS.get(attribute_name, {})
+    target_embeddings_tensor = None
+    semantic_target_value_map = {}
+    all_semantic_target_texts = []
+    can_do_semantic = False
+
+    if semantic_target_map and taxonomy_service and taxonomy_service.embedding_model:
+        idx = 0
+        for value, descriptions in semantic_target_map.items():
+            for desc in descriptions:
+                all_semantic_target_texts.append(desc)
+                semantic_target_value_map[idx] = value
+                idx += 1
+
+        if all_semantic_target_texts:
+            try:
+                target_embeddings_tensor = taxonomy_service.embedding_model.encode(all_semantic_target_texts, convert_to_tensor=True)
+                can_do_semantic = True
+                logger.debug(f"Hybrid Inference ({attribute_name}): Prepared semantic targets.")
+            except Exception as e:
+                logger.error(f"Hybrid Inference ({attribute_name}): Failed to encode semantic target descriptions: {e}", exc_info=True)
+        else:
+             logger.debug(f"Hybrid Inference ({attribute_name}): No semantic target descriptions found.")
+    else:
+        logger.warning(f"Hybrid Inference ({attribute_name}): Semantic inference disabled (no targets or model unavailable).")
+    # --- End Prepare Semantic Targets ---
 
-    for text in texts:
-        # Check most specific first
-        if any(keyword in text for keyword in ["phd", "doctorate", "dissertation"]):
-            doctorate_evidence += 1
-            logger.debug(f"Doctorate keyword found: {text}")
-        elif any(keyword in text for keyword in ["master's degree", "graduate school", "thesis"]):
-            masters_evidence += 1
-            logger.debug(f"Masters keyword found: {text}")
-        elif any(keyword in text for keyword in ["bachelor's degree", "university", "college", "undergrad"]):
-            bachelors_evidence += 1
-            logger.debug(f"Bachelors keyword found: {text}")
-
-    # Prioritize highest level found with some evidence threshold
-    if doctorate_evidence >= 1:
-        logger.debug(f"Inferring 'education_level' = 'doctorate' (evidence count: {doctorate_evidence})")
-        return "doctorate"
-    elif masters_evidence >= 1:
-        logger.debug(f"Inferring 'education_level' = 'masters' (evidence count: {masters_evidence})")
-        return "masters"
-    elif bachelors_evidence >= 2: # Require slightly more for bachelors
-        logger.debug(f"Inferring 'education_level' = 'bachelors' (evidence count: {bachelors_evidence})")
-        return "bachelors"
-    # Inferring 'high_school' is difficult, maybe default if other evidence is weak?
-    logger.debug("Inferring 'education_level' = None (insufficient evidence)")
-    return None # Very uncertain
-
-# MODIFIED: Pass the list of userData documents directly
-async def infer_age_bracket(user_data_docs: List[Dict[str, Any]]) -> Optional[str]:
-    """Infer age bracket based on keywords - EXTREMELY SPECULATIVE AND UNRELIABLE."""
-    young_adult_evidence = 0
-    mid_career_evidence = 0
-    senior_evidence = 0
-    # MODIFIED: Call the updated helper function
-    texts = _extract_text_from_user_data_docs(user_data_docs)
-    logger.debug(f"Inferring 'age_bracket' from {len(texts)} text entries.")
+    # --- Prepare Keyword Rules ---
+    keyword_rule_map = KEYWORD_RULES.get(attribute_name, {})
+    can_do_rules = bool(keyword_rule_map)
+    logger.debug(f"Hybrid Inference ({attribute_name}): Keyword rules {'enabled' if can_do_rules else 'disabled'}.")
+    # --- End Prepare Keyword Rules ---
 
-    for text in texts:
-        if any(keyword in text for keyword in AGE_BRACKET_SENIOR_KEYWORDS):
-            senior_evidence += 1
-            logger.debug(f"Senior age keyword found: {text}")
-        elif any(keyword in text for keyword in AGE_BRACKET_MID_CAREER_KEYWORDS):
-            mid_career_evidence += 1
-            logger.debug(f"Mid-career age keyword found: {text}")
-        elif any(keyword in text for keyword in AGE_BRACKET_YOUNG_ADULT_KEYWORDS):
-            young_adult_evidence += 1
-            logger.debug(f"Young adult age keyword found: {text}")
-
-    # Simple thresholding - needs much refinement or a different approach
-    if senior_evidence >= 1:
-        logger.debug(f"Inferring 'age_bracket' = '65+' (evidence count: {senior_evidence})")
-        return "65+"
-    elif mid_career_evidence >= 2:
-        # Could try to differentiate 35-44 vs 45-54 based on keywords, but very hard
-        logger.debug(f"Inferring 'age_bracket' = '35-54' (evidence count: {mid_career_evidence})")
-        return "35-54" # Combine for now
-    elif young_adult_evidence >= 2:
-        logger.debug(f"Inferring 'age_bracket' = '18-24' (evidence count: {young_adult_evidence})")
-        return "18-24"
-
-    logger.warning("Age bracket inference based on keywords is highly unreliable.")
-    logger.debug("Inferring 'age_bracket' = None (insufficient evidence)")
-    return None # Highly uncertain
-
-# --- Main Inference Runner ---
+    if not can_do_rules and not can_do_semantic:
+        logger.warning(f"Hybrid Inference ({attribute_name}): No rules or semantic targets available. Cannot infer.")
+        return None
+
+    # --- Calculate similarities and count evidence (Hybrid Logic) ---
+    evidence_counts = defaultdict(float) # Use float for weighted evidence
+    matched_texts_per_value = defaultdict(set) # Track unique texts per value
 
+    for text in texts:
+        matched_by_rule = False
+        # 1. Check Keyword Rules First
+        if can_do_rules:
+            for value, keywords in keyword_rule_map.items():
+                # Simple substring check for keywords
+                if any(keyword in text for keyword in keywords):
+                    if text not in matched_texts_per_value[value]:
+                        evidence_counts[value] += RULE_MATCH_WEIGHT
+                        matched_texts_per_value[value].add(text)
+                        logger.debug(f"Rule Match ({attribute_name}): '{text}' -> '{value}' (Weight: {RULE_MATCH_WEIGHT})")
+                        matched_by_rule = True
+                        break # Stop checking rules for this text once one matches
+            if matched_by_rule:
+                continue # Move to the next text if a rule matched
+
+        # 2. If no rule matched, try Semantic Check
+        if can_do_semantic:
+            try:
+                text_embedding = taxonomy_service.embedding_model.encode(text, convert_to_tensor=True)
+                similarities = util.pytorch_cos_sim(text_embedding, target_embeddings_tensor)[0]
+                best_match_idx = similarities.argmax().item()
+                best_score = similarities[best_match_idx].item()
+
+                if best_score >= SEMANTIC_SIMILARITY_THRESHOLD:
+                    matched_value = semantic_target_value_map[best_match_idx]
+                    if text not in matched_texts_per_value[matched_value]:
+                        evidence_counts[matched_value] += SEMANTIC_MATCH_WEIGHT
+                        matched_texts_per_value[matched_value].add(text)
+                        logger.debug(f"Semantic Match ({attribute_name}): '{text}' -> '{matched_value}' (Score: {best_score:.4f}, Weight: {SEMANTIC_MATCH_WEIGHT}, Target: '{all_semantic_target_texts[best_match_idx]}')")
+
+            except Exception as e:
+                logger.warning(f"Hybrid Inference ({attribute_name}): Error processing semantic check for text '{text}': {e}")
+                continue # Skip this text entry
+    # --- End Calculate similarities ---
+
+
+    # --- Determine inferred value based on evidence thresholds (Using Floats) ---
+    inferred_value = None
+    highest_evidence_score = 0.0
+
+    # Special handling for relationship status priority
+    if attribute_name == "relationship_status":
+        if evidence_counts.get("married", 0.0) >= EVIDENCE_THRESHOLD_MARRIED:
+            inferred_value = "married"
+            highest_evidence_score = evidence_counts["married"]
+        elif evidence_counts.get("relationship", 0.0) >= EVIDENCE_THRESHOLD_DEFAULT:
+             # Only infer 'relationship' if 'married' didn't meet its threshold
+            if inferred_value != "married":
+                inferred_value = "relationship"
+                highest_evidence_score = evidence_counts["relationship"]
+        # Add 'single' check if desired
+        # elif evidence_counts.get("single", 0.0) >= EVIDENCE_THRESHOLD_DEFAULT + 1.0: ...
+
+    # Special handling for education level priority
+    elif attribute_name == "education_level":
+        if evidence_counts.get("doctorate", 0.0) >= EVIDENCE_THRESHOLD_EDUCATION:
+            inferred_value = "doctorate"
+            highest_evidence_score = evidence_counts["doctorate"]
+        elif evidence_counts.get("masters", 0.0) >= EVIDENCE_THRESHOLD_EDUCATION:
+             if inferred_value != "doctorate":
+                inferred_value = "masters"
+                highest_evidence_score = evidence_counts["masters"]
+        elif evidence_counts.get("bachelors", 0.0) >= EVIDENCE_THRESHOLD_DEFAULT:
+             if inferred_value not in ["doctorate", "masters"]:
+                inferred_value = "bachelors"
+                highest_evidence_score = evidence_counts["bachelors"]
+
+    else:
+        # Default handling: pick value with highest evidence score above threshold
+        threshold = EVIDENCE_THRESHOLD_DEFAULT
+        for value, score in evidence_counts.items():
+            if score >= threshold and score > highest_evidence_score:
+                highest_evidence_score = score
+                inferred_value = value
+
+    if inferred_value is not None:
+        logger.info(f"Hybrid Inference Result ({attribute_name}): Inferred '{inferred_value}' (Evidence Score: {highest_evidence_score:.2f})")
+    else:
+        # Log counts even if insufficient
+        log_counts = {k: round(v, 2) for k, v in evidence_counts.items()}
+        logger.info(f"Hybrid Inference Result ({attribute_name}): None (Insufficient evidence. Scores: {log_counts})")
+
+    return inferred_value
+    # --- End Determine inferred value ---
+
+
+# --- Main Inference Runner (Updated to call hybrid helper) ---
 async def run_inference_for_user(user_id: str, email: str, db, limit: int = 50) -> bool:
     """
-    Runs demographic inference based on recent user data and updates the user document if changes are found.
+    Runs HYBRID demographic inference based on recent user data and updates
+    the user document if changes are found and the field is not verified by the user.
     Returns True if the user document was updated, False otherwise.
     """
-    logger.info(f"Running demographic inference for user {user_id} ({email})")
+    logger.info(f"Running HYBRID demographic inference for user {user_id} ({email})")
     updated = False
     try:
         user_object_id = ObjectId(user_id)
@@ -250,7 +386,7 @@ async def run_inference_for_user(user_id: str, email: str, db, limit: int = 50)
             logger.error(f"Inference: User not found by ID {user_id}")
             return False
 
-        # Fetch recent userData entries for the user
+        # Fetch recent userData entries
         recent_data = await db.userData.find(
             {"userId": user_object_id}
         ).sort("timestamp", -1).limit(limit).to_list(length=limit)
@@ -258,71 +394,91 @@ async def run_inference_for_user(user_id: str, email: str, db, limit: int = 50)
         if not recent_data:
             logger.info(f"Inference: No recent data found for user {user_id}")
             return False
-        else:
-            logger.info(f"Inference: Found {len(recent_data)} recent data entries for user {user_id}")
 
+        logger.info(f"Inference: Found {len(recent_data)} recent data entries for user {user_id}")
 
-        # --- Run inference functions ---
-        inferred_kids = await infer_has_kids(recent_data)
-        inferred_status = await infer_relationship_status(recent_data)
-        inferred_employment = await infer_employment_status(recent_data)
-        inferred_education = await infer_education_level(recent_data) # Very speculative
-        inferred_age_bracket = None
-        # Only infer age bracket if age is not already set in demographicData
+        # Get Taxonomy Service (needed for embeddings)
+        taxonomy_service = await get_taxonomy_service(db)
+        # No need to check embedding model availability here, helper function handles it
+
+        # --- Run hybrid inference functions ---
+        # Call the renamed helper function
+        inferred_kids = await _run_hybrid_inference_for_attribute("has_kids", recent_data, taxonomy_service)
+        inferred_status = await _run_hybrid_inference_for_attribute("relationship_status", recent_data, taxonomy_service)
+        inferred_employment = await _run_hybrid_inference_for_attribute("employment_status", recent_data, taxonomy_service)
+        inferred_education = await _run_hybrid_inference_for_attribute("education_level", recent_data, taxonomy_service)
+
+        # Conditional inference based on user-provided data
         current_demographics = user.get("demographicData", {})
+        inferred_age_bracket = None
         if current_demographics.get("age") is None:
             logger.info(f"Inference: User {email} has no age set, attempting age bracket inference.")
-            inferred_age_bracket = await infer_age_bracket(recent_data) # Highly speculative
+            inferred_age_bracket = await _run_hybrid_inference_for_attribute("age_bracket", recent_data, taxonomy_service)
         else:
-            logger.info(f"Inference: User {email} has age set ({current_demographics.get('age')}), skipping age bracket inference.")
+            logger.info(f"Inference: User {email} has age set, skipping age bracket inference.")
 
+        inferred_gender = None
+        if current_demographics.get("gender") is None:
+             logger.info(f"Inference: User {email} has no gender set, attempting gender inference.")
+             inferred_gender = await _run_hybrid_inference_for_attribute("gender", recent_data, taxonomy_service)
+        else:
+             logger.info(f"Inference: User {email} has gender set, skipping gender inference.")
 
-        # --- Prepare update payload ---
+        # --- Prepare update payload, respecting verification flags (No changes needed here) ---
         update_payload = {}
-        # Read current values from the nested demographicData object
-        current_kids = current_demographics.get("inferredHasKids")
-        current_status = current_demographics.get("inferredRelationshipStatus")
-        current_employment = current_demographics.get("inferredEmploymentStatus")
-        current_education = current_demographics.get("inferredEducationLevel")
-        current_age_bracket = current_demographics.get("inferredAgeBracket")
-
-        # Use dot notation for updates within the nested object
-        if inferred_kids is not None and inferred_kids != current_kids:
-            update_payload["demographicData.inferredHasKids"] = inferred_kids
-            logger.info(f"Inference update for {email}: demographicData.inferredHasKids -> {inferred_kids} (was {current_kids})")
-        if inferred_status is not None and inferred_status != current_status:
-            update_payload["demographicData.inferredRelationshipStatus"] = inferred_status
-            logger.info(f"Inference update for {email}: demographicData.inferredRelationshipStatus -> {inferred_status} (was {current_status})")
-        if inferred_employment is not None and inferred_employment != current_employment:
-            update_payload["demographicData.inferredEmploymentStatus"] = inferred_employment
-            logger.info(f"Inference update for {email}: demographicData.inferredEmploymentStatus -> {inferred_employment} (was {current_employment})")
-        if inferred_education is not None and inferred_education != current_education:
-            update_payload["demographicData.inferredEducationLevel"] = inferred_education
-            logger.info(f"Inference update for {email}: demographicData.inferredEducationLevel -> {inferred_education} (was {current_education})")
-        if inferred_age_bracket is not None and inferred_age_bracket != current_age_bracket:
-            update_payload["demographicData.inferredAgeBracket"] = inferred_age_bracket
-            logger.info(f"Inference update for {email}: demographicData.inferredAgeBracket -> {inferred_age_bracket} (was {current_age_bracket})")
+        now = datetime.now()
+
+        def check_and_set(field_name: str, inferred_value: Any, is_verified_flag: str):
+            current_value = current_demographics.get(field_name)
+            is_verified = current_demographics.get(is_verified_flag, False)
+
+            if inferred_value is not None and inferred_value != current_value:
+                if not is_verified:
+                    # Use dot notation for nested update
+                    db_field_name = f"demographicData.{field_name}"
+                    update_payload[db_field_name] = inferred_value
+                    logger.info(f"Inference update for {email}: {db_field_name} -> {inferred_value} (was {current_value}, verified: {is_verified})")
+                else:
+                    logger.info(f"Inference skipped for {email}: {field_name} is verified by user (Value: {current_value}). Would have inferred: {inferred_value}")
+
+        # Map inferred fields to their verification flags
+        check_and_set("inferredHasKids", inferred_kids, "hasKidsIsVerified")
+        check_and_set("inferredRelationshipStatus", inferred_status, "relationshipStatusIsVerified")
+        check_and_set("inferredEmploymentStatus", inferred_employment, "employmentStatusIsVerified")
+        check_and_set("inferredEducationLevel", inferred_education, "educationLevelIsVerified")
+        check_and_set("inferredAgeBracket", inferred_age_bracket, "ageBracketIsVerified")
+        check_and_set("inferredGender", inferred_gender, "genderIsVerified")
         # --- End Prepare update payload ---
 
-        # Update user document in DB if there are changes
+        # --- Update user document in DB if there are changes (No changes needed here) ---
         if update_payload:
-            logger.info(f"Inference: Found updates for {email}: {update_payload.keys()}")
-            update_payload["updatedAt"] = datetime.now() # Update timestamp
+            update_payload["updatedAt"] = now # Update timestamp
             result = await db.users.update_one(
                 {"_id": user_object_id},
                 {"$set": update_payload}
             )
             if result.modified_count > 0:
                 updated = True
-                logger.info(f"Inference: Successfully updated user document for {email}")
-
+                logger.info(f"Inference: Successfully updated demographic data for user {user_id}")
+                # --- Invalidate Caches ---
+                auth0_id = user.get("auth0Id")
+                if auth0_id:
+                    await invalidate_cache(f"{CACHE_KEYS['USER_DATA']}{auth0_id}")
+                    await invalidate_cache(f"{CACHE_KEYS['PREFERENCES']}{auth0_id}")
+                    # Invalidate store-specific caches if opt-in stores exist
+                    if user.get("privacySettings", {}).get("optInStores"):
+                        for store_id in user["privacySettings"]["optInStores"]:
+                            # CRITICAL FIX: Use user_object_id (ObjectId string) for store cache key consistency
+                            await invalidate_cache(f"{CACHE_KEYS['STORE_PREFERENCES']}{user_id}:{store_id}")
+                    logger.info(f"Inference: Invalidated relevant caches for user {auth0_id}")
+                # --- End Cache Invalidation ---
             else:
-                 logger.warning(f"Inference: Update payload generated but DB modify count was 0 for {email}. Payload: {update_payload}")
+                logger.warning(f"Inference: Update attempted for {user_id} but no documents were modified.")
         else:
-            logger.info(f"Inference: No demographic updates found for {email}")
-
+            logger.info(f"Inference: No demographic updates found for {user_id}")
 
     except Exception as e:
         logger.error(f"Error during demographic inference for user {user_id}: {str(e)}", exc_info=True)
 
     return updated
+    # --- End Main Inference Runner ---

From 6d89ade278f69af381730a319fc0f666c2a27b2d Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 20:16:15 +0530
Subject: [PATCH 07/21] Refactor code structure for improved readability and
 maintainability

---
 web/src/api/hooks/useSystemHooks.ts           |    6 +-
 web/src/api/hooks/useUserHooks.ts             |   82 +-
 .../UserDashboard/UserPreferencesPage.tsx     | 1131 ++++++++++++-----
 3 files changed, 847 insertions(+), 372 deletions(-)

diff --git a/web/src/api/hooks/useSystemHooks.ts b/web/src/api/hooks/useSystemHooks.ts
index 4a2257b..322d41f 100644
--- a/web/src/api/hooks/useSystemHooks.ts
+++ b/web/src/api/hooks/useSystemHooks.ts
@@ -5,7 +5,7 @@ import { HealthStatus, PingStatus, Error } from "../types/data-contracts";
 
 export function useHealthCheck() {
   // Destructure apiClients first, then get health from it
-  const { apiClients } = useApiClients();
+  const { apiClients, clientsReady } = useApiClients(); // Get clientsReady
   const { health } = apiClients; // Now get health client
 
   // Adjust the useQuery generic to expect HealthStatus as the data type
@@ -13,13 +13,14 @@ export function useHealthCheck() {
     queryKey: cacheKeys.system.health(),
     // Ensure health client exists before calling
     queryFn: () => health.healthCheck().then((res) => res.data),
+    enabled: clientsReady, // Only run when client is ready
     ...cacheSettings.system,
   });
 }
 
 export function usePing() {
   // Destructure apiClients first, then get ping from it
-  const { apiClients } = useApiClients();
+  const { apiClients, clientsReady } = useApiClients(); // Get clientsReady
   const { ping } = apiClients; // Now get ping client
 
   // Adjust the useQuery generic to expect PingStatus as the data type
@@ -27,6 +28,7 @@ export function usePing() {
     queryKey: cacheKeys.system.ping(),
     // Ensure ping client exists before calling
     queryFn: () => ping.ping().then((res) => res.data), // queryFn returns PingStatus
+    enabled: clientsReady, // Only run when client is ready
     ...cacheSettings.system,
     // Ping doesn't require auth, so no enabled check needed here
   });
diff --git a/web/src/api/hooks/useUserHooks.ts b/web/src/api/hooks/useUserHooks.ts
index 17e81ae..38dbadb 100644
--- a/web/src/api/hooks/useUserHooks.ts
+++ b/web/src/api/hooks/useUserHooks.ts
@@ -1,4 +1,9 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  QueryKey,
+} from "@tanstack/react-query"; // Import QueryKey
 import { useApiClients } from "../apiClient";
 import { cacheKeys, cacheSettings, optimisticUpdates } from "../utils/cache";
 import {
@@ -10,15 +15,25 @@ import {
   MonthlySpendingAnalytics,
   GetSpendingAnalyticsParams,
   GetRecentUserDataParams, // <-- Import params type for recent data
+  Error, // <-- Import Error type
 } from "../types/data-contracts";
 import { useAuth } from "../../hooks/useAuth"; // Import useAuth
 
+// Define a type for the context returned by onMutate
+interface MutationContext {
+  previousData?: User | undefined;
+  queryKey?: QueryKey;
+}
+
 export function useUserProfile() {
   const { apiClients, clientsReady } = useApiClients();
-  return useQuery({
+  const { isAuthenticated, isLoading: authLoading } = useAuth(); // Get auth state
+  return useQuery<User, Error>({
+    // Specify types
     queryKey: cacheKeys.users.profile(),
     queryFn: () => apiClients.users.getUserProfile().then((res) => res.data),
-    enabled: clientsReady,
+    // Update enabled check
+    enabled: isAuthenticated && !authLoading && clientsReady,
     ...cacheSettings.user,
   });
 }
@@ -27,11 +42,16 @@ export function useUpdateUserProfile() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation({
+  return useMutation<User, Error, UserUpdate>({
+    // Specify types
     mutationFn: (userData: UserUpdate) =>
       apiClients.users.updateUserProfile(userData).then((res) => res.data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: cacheKeys.users.profile() });
+    onSuccess: (updatedUser) => {
+      // Can use updatedUser if needed
+      // Invalidate or directly update the cache
+      queryClient.setQueryData(cacheKeys.users.profile(), updatedUser);
+      // Optionally invalidate if optimistic updates aren't enough or for related data
+      // queryClient.invalidateQueries({ queryKey: cacheKeys.users.profile() });
     },
   });
 }
@@ -42,6 +62,7 @@ export function useUserPreferences() {
   const { isAuthenticated, isLoading: authLoading } = useAuth(); // Get auth state
 
   return useQuery({
+    // Add types if UserPreferences type exists
     queryKey: cacheKeys.users.preferences(),
     queryFn: () =>
       apiClients.users.getUserOwnPreferences().then((res) => res.data),
@@ -56,14 +77,22 @@ export function useUpdateUserPreferences() {
   const queryClient = useQueryClient();
 
   return useMutation({
+    // Add types if UserPreferences type exists
     mutationFn: (preferences: UserPreferencesUpdate) =>
       apiClients.users
         .updateUserPreferences(preferences)
         .then((res) => res.data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: cacheKeys.users.preferences(),
-      });
+    onSuccess: (updatedPreferences) => {
+      // Can use updatedPreferences
+      // Invalidate or directly update the cache
+      queryClient.setQueryData(
+        cacheKeys.users.preferences(),
+        updatedPreferences,
+      );
+      // Optionally invalidate
+      // queryClient.invalidateQueries({
+      //   queryKey: cacheKeys.users.preferences(),
+      // });
     },
   });
 }
@@ -72,7 +101,9 @@ export function useOptInToStore() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation({
+  return useMutation<void, Error, string, MutationContext>({
+    // Add MutationContext type
+    // Specify types
     mutationFn: (storeId: string) =>
       apiClients.users.optInToStore(storeId).then((res) => res.data),
     onMutate: async (storeId) => {
@@ -82,18 +113,24 @@ export function useOptInToStore() {
       const previousData = queryClient.getQueryData<User>(queryKey); // <--- Use User type
 
       // Apply optimistic update (which now targets the profile cache)
-      optimisticUpdates.optInStore(storeId);
+      if (previousData) {
+        optimisticUpdates.optInStore(storeId); // Apply optimistic update locally
+      }
 
       return { previousData, queryKey }; // Pass queryKey for rollback/settled
     },
     onError: (_err, _variables, context) => {
+      // Context is now typed
       // Rollback on error using the correct key and data
-      if (context?.previousData) {
+      // Check if context and its properties exist before using them
+      if (context?.queryKey && context.previousData !== undefined) {
         queryClient.setQueryData(context.queryKey, context.previousData);
       }
     },
     onSettled: (_data, _error, _variables, context) => {
+      // Context is now typed
       // Invalidate the USER PROFILE cache on settled
+      // Check if context and queryKey exist
       if (context?.queryKey) {
         queryClient.invalidateQueries({ queryKey: context.queryKey });
       }
@@ -109,7 +146,9 @@ export function useOptOutFromStore() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation({
+  return useMutation<void, Error, string, MutationContext>({
+    // Add MutationContext type
+    // Specify types
     mutationFn: (storeId: string) =>
       apiClients.users.optOutFromStore(storeId).then((res) => res.data),
     onMutate: async (storeId) => {
@@ -119,18 +158,24 @@ export function useOptOutFromStore() {
       const previousData = queryClient.getQueryData<User>(queryKey); // <--- Use User type
 
       // Apply optimistic update (which now targets the profile cache)
-      optimisticUpdates.optOutStore(storeId);
+      if (previousData) {
+        optimisticUpdates.optOutStore(storeId); // Apply optimistic update locally
+      }
 
       return { previousData, queryKey }; // Pass queryKey for rollback/settled
     },
     onError: (_err, _variables, context) => {
+      // Context is now typed
       // Rollback on error using the correct key and data
-      if (context?.previousData) {
+      // Check if context and its properties exist before using them
+      if (context?.queryKey && context.previousData !== undefined) {
         queryClient.setQueryData(context.queryKey, context.previousData);
       }
     },
     onSettled: (_data, _error, _variables, context) => {
+      // Context is now typed
       // Invalidate the USER PROFILE cache on settled
+      // Check if context and queryKey exist
       if (context?.queryKey) {
         queryClient.invalidateQueries({ queryKey: context.queryKey });
       }
@@ -146,13 +191,14 @@ export function useDeleteUserProfile() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation({
+  return useMutation<void, Error, void>({
+    // Specify types
     mutationFn: () =>
       apiClients.users.deleteUserProfile().then((res) => res.data),
     onSuccess: () => {
       // After successful deletion, clear user-related cache
       queryClient.invalidateQueries({ queryKey: ["auth", "metadata"] });
-      queryClient.invalidateQueries({ queryKey: ["users"] });
+      queryClient.invalidateQueries({ queryKey: cacheKeys.users.all }); // Invalidate all user queries
     },
   });
 }
diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index 32f17dd..8a8456c 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react"; // Add React import
 import {
   Card,
   Button,
@@ -10,52 +10,71 @@ import {
   ModalFooter,
   Label,
   TextInput,
-  Select, // Already imported
+  Select,
   RangeSlider,
   List,
   ListItem,
+  Badge, // Import Badge
+  Tooltip, // Import Tooltip
 } from "flowbite-react";
 import {
-  HiInformationCircle,
+  HiUser,
   HiPencil,
+  HiInformationCircle,
+  HiOutlineCalendar, // Example icon for Age
+  HiOutlineGlobeAlt, // Example icon for Country
+  HiOutlineCurrencyDollar, // Example icon for Income
+  HiOutlineIdentification, // Example icon for Gender
+  HiOutlineUsers, // Example icon for Relationship
+  HiOutlineBriefcase, // Example icon for Employment
+  HiOutlineAcademicCap, // Example icon for Education
+  HiOutlineUserGroup, // Example icon for Kids
+  HiCheckCircle, // Icon for verified
+  HiQuestionMarkCircle, // Icon for inferred/unverified
   HiTrash,
   HiPlus,
-  HiUser,
-  HiSparkles,
-  HiOutlineUserCircle,
-  HiOutlineCake,
-  HiOutlineGlobeAlt,
-  HiOutlineCash,
+  HiOutlineHeart, // Icon for correcting
 } from "react-icons/hi";
 import {
   useUserProfile,
   useUserPreferences,
-  useUpdateUserProfile,
+  useUpdateUserProfile, // Import the hook
   useUpdateUserPreferences,
-} from "../../api/hooks/useUserHooks";
-import { useTaxonomy } from "../../api/hooks/useTaxonomyHooks";
+} from "../../api/hooks/useUserHooks"; // Adjust path as needed
+import { useTaxonomy } from "../../api/hooks/useTaxonomyHooks"; // Import useTaxonomy separately
 import {
   UserUpdate,
   PreferenceItem,
   TaxonomyCategory,
-} from "../../api/types/data-contracts";
+  DemographicData, // Import DemographicData type
+  TaxonomyAttribute, // Import TaxonomyAttribute type
+} from "../../api/types/data-contracts"; // Adjust path as needed
 import LoadingSpinner from "../../components/common/LoadingSpinner";
 import ErrorDisplay from "../../components/common/ErrorDisplay";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
-import countryData from "../../data/countries.json"; // <-- Import country data
+import countryData from "../../data/countries.json";
 
 // --- Form Types ---
-type DemographicsFormData = Pick<
-  UserUpdate,
-  "gender" | "age" | "country" | "incomeBracket"
->;
+// This form now handles ALL demographic fields the user can provide
+type DemographicsFormData = {
+  gender?: DemographicData["gender"];
+  age?: DemographicData["age"];
+  country?: DemographicData["country"];
+  incomeBracket?: DemographicData["incomeBracket"];
+  // Add fields that were previously only inferred
+  hasKids?: boolean | null; // Use boolean for hasKids
+  relationshipStatus?: DemographicData["inferredRelationshipStatus"];
+  employmentStatus?: DemographicData["inferredEmploymentStatus"];
+  educationLevel?: DemographicData["inferredEducationLevel"];
+};
+// ... (PreferenceFormData remains the same) ...
 type PreferenceFormData = {
   category: string;
   score: number;
   attributes?: Record<string, string | undefined>;
 };
 
-// --- Define options for selects (copied from UserRegistrationForm) ---
+// --- Define options for selects (Keep existing) ---
 const genderOptions = [
   { value: "", label: "Select Gender" },
   { value: "male", label: "Male" },
@@ -65,7 +84,7 @@ const genderOptions = [
 ];
 
 const incomeOptions = [
-  { value: "", label: "Select Income Bracket" }, // Make placeholder less optional here
+  { value: "", label: "Select Income Bracket" },
   { value: "<25k", label: "< $25,000" },
   { value: "25k-50k", label: "$25,000 - $49,999" },
   { value: "50k-100k", label: "$50,000 - $99,999" },
@@ -74,7 +93,7 @@ const incomeOptions = [
   { value: "prefer_not_to_say", label: "Prefer not to say" },
 ];
 
-// --- Country Options (copied from UserRegistrationForm) ---
+// --- Country Options (Keep existing) ---
 interface CountryOption {
   value: string;
   label: string;
@@ -84,50 +103,195 @@ const typedCountryData: CountryOption[] = Object.entries(countryData).map(
 );
 typedCountryData.sort((a, b) => a.label.localeCompare(b.label));
 const countryOptions: CountryOption[] = [
-  { value: "", label: "Select Country" }, // Make placeholder less optional here
+  { value: "", label: "Select Country" },
   ...typedCountryData,
 ];
-// --- End Country Options ---
 
-// --- Mini Demographic Card Component (Keep existing) ---
-interface DemoInfoCardProps {
+// --- NEW Options for Inferred Fields ---
+const hasKidsOptions = [
+  { value: "", label: "Select Option" }, // Represents null
+  { value: "true", label: "Yes" },
+  { value: "false", label: "No" },
+];
+
+const relationshipStatusOptions = [
+  { value: "", label: "Select Status" }, // Represents null
+  { value: "single", label: "Single" },
+  { value: "relationship", label: "In a Relationship" },
+  { value: "married", label: "Married" },
+  // Add other relevant options if needed, matching the enum in DemographicData
+];
+
+const employmentStatusOptions = [
+  { value: "", label: "Select Status" }, // Represents null
+  { value: "employed", label: "Employed" },
+  { value: "unemployed", label: "Unemployed" },
+  { value: "student", label: "Student" },
+  // Add other relevant options if needed
+];
+
+const educationLevelOptions = [
+  { value: "", label: "Select Level" }, // Represents null
+  { value: "high_school", label: "High School" },
+  { value: "bachelors", label: "Bachelor's Degree" },
+  { value: "masters", label: "Master's Degree" },
+  { value: "doctorate", label: "Doctorate" },
+  // Add other relevant options if needed
+];
+// --- End NEW Options ---
+
+// --- NEW: Helper to format demographic values ---
+const formatValue = (
+  value: string | number | boolean | null | undefined,
+): string => {
+  if (value === null || value === undefined || value === "") return "Not set";
+  if (typeof value === "boolean") return value ? "Yes" : "No"; // Format boolean for 'hasKids'
+  // Add specific formatting if needed (e.g., capitalize)
+  if (typeof value === "string") {
+    return value.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()); // Capitalize words
+  }
+  return String(value);
+};
+
+// --- UPDATED: Demographic Info Display Component ---
+interface DemoInfoDisplayProps {
   icon: React.ElementType;
   label: string;
-  value: string | number | null | undefined;
+  // Keep userProvidedValue for original fields
+  userProvidedValue: string | number | boolean | null | undefined;
+  inferredValue?: string | number | boolean | null | undefined; // Can be boolean for hasKids
+  isVerified?: boolean;
+  verificationFieldName?: keyof DemographicData; // e.g., 'genderIsVerified'
+  onVerify?: (fieldName: keyof DemographicData) => void;
+  onEdit?: () => void; // Function to open the edit form
   isLoading?: boolean;
+  isMutating?: boolean; // To disable buttons during mutation
+  isEditingDemographics?: boolean;
 }
 
-const DemoInfoCard: React.FC<DemoInfoCardProps> = ({
+const DemoInfoDisplay: React.FC<DemoInfoDisplayProps> = ({
   icon: Icon,
   label,
-  value,
+  userProvidedValue, // This now represents the USER's input for ALL fields
+  inferredValue,
+  isVerified,
+  verificationFieldName,
+  onVerify,
+  onEdit,
   isLoading,
-}) => (
-  <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
-    <Icon className="mr-3 h-6 w-6 flex-shrink-0 text-gray-500 dark:text-gray-400" />
-    <div className="flex-grow">
-      <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
-        {label}
-      </p>
-      {isLoading ? (
-        <Spinner size="xs" />
-      ) : (
-        <p className="text-sm font-semibold text-gray-900 dark:text-white">
-          {value || "Not set"}
+  isMutating,
+  isEditingDemographics,
+}) => {
+  // Determine the primary value to display: User's input takes precedence
+  const primaryValue =
+    userProvidedValue !== null &&
+    userProvidedValue !== undefined &&
+    userProvidedValue !== ""
+      ? userProvidedValue
+      : inferredValue; // Fall back to inferred if user hasn't provided
+
+  const displayValue = formatValue(primaryValue);
+
+  // Determine if the displayed value is inferred and unverified
+  const isDisplayingInferredUnverified =
+    (userProvidedValue === null ||
+      userProvidedValue === undefined ||
+      userProvidedValue === "") && // User hasn't provided
+    inferredValue !== null &&
+    inferredValue !== undefined && // Inferred value exists
+    !isVerified; // And it's not verified
+
+  return (
+    <div className="flex items-start rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+      <Icon className="mt-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-500 dark:text-gray-400" />
+      <div className="flex-grow">
+        <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
+          {label}
+        </p>
+        <p className="text-lg font-semibold text-gray-900 dark:text-white">
+          {isLoading ? (
+            <Spinner size="sm" />
+          ) : (
+            <>
+              {displayValue}
+              {/* Show badge only if displaying an inferred value */}
+              {(userProvidedValue === null ||
+                userProvidedValue === undefined ||
+                userProvidedValue === "") &&
+                inferredValue !== null &&
+                inferredValue !== undefined && (
+                  <Tooltip
+                    content={
+                      isVerified ? "Confirmed by you" : "Inferred by Tapiro"
+                    }
+                  >
+                    <Badge
+                      color={isVerified ? "success" : "warning"}
+                      icon={isVerified ? HiCheckCircle : HiQuestionMarkCircle}
+                      className="ml-2 inline-flex"
+                    >
+                      {isVerified ? "Confirmed" : "Inferred"}
+                    </Badge>
+                  </Tooltip>
+                )}
+            </>
+          )}
         </p>
+      </div>
+      {/* Action Buttons */}
+      {!isLoading && !isEditingDemographics && (
+        <div className="ml-auto flex flex-col space-y-1 pl-2">
+          {/* Show Verify button ONLY if displaying an inferred, unverified value */}
+          {isDisplayingInferredUnverified &&
+            verificationFieldName &&
+            onVerify && (
+              <Tooltip content="Confirm this inferred value is correct">
+                <Button
+                  color="success"
+                  size="xs"
+                  onClick={() => onVerify(verificationFieldName)}
+                  disabled={isMutating}
+                  className="w-full justify-center"
+                >
+                  {isMutating ? (
+                    <Spinner size="xs" className="mr-1" />
+                  ) : (
+                    <HiCheckCircle className="mr-1 h-4 w-4" />
+                  )}
+                  Confirm
+                </Button>
+              </Tooltip>
+            )}
+          {/* Edit button should always be available to add/change user-provided value */}
+          {onEdit && (
+            <Tooltip content="Edit your information">
+              <Button
+                color="light"
+                size="xs"
+                onClick={onEdit}
+                disabled={isMutating}
+                className="w-full justify-center"
+              >
+                <HiPencil className="mr-1 h-4 w-4" /> Edit
+              </Button>
+            </Tooltip>
+          )}
+        </div>
       )}
     </div>
-  </div>
-);
-// --- End Mini Demographic Card Component ---
+  );
+};
+// --- End Demographic Info Display Component ---
 
 const UserPreferencesPage: React.FC = () => {
   // --- Data Fetching (Keep existing) ---
   const {
-    data: userProfile,
+    data: userProfile, // This should now contain the full User object including demographicData
     isLoading: profileLoading,
     error: profileError,
+    refetch: refetchUserProfile, // Add refetch
   } = useUserProfile();
+  // ... (rest of data fetching) ...
   const {
     data: preferencesData,
     isLoading: preferencesLoading,
@@ -139,12 +303,13 @@ const UserPreferencesPage: React.FC = () => {
     error: taxonomyError,
   } = useTaxonomy();
 
-  // --- Mutations (Keep existing) ---
+  // --- Mutations (Keep existing, ensure useUpdateUserProfile handles nested demographicData) ---
   const {
     mutate: updateProfile,
     isPending: isUpdatingProfile,
     error: updateProfileError,
   } = useUpdateUserProfile();
+  // ... (rest of mutations) ...
   const {
     mutate: updatePreferences,
     isPending: isUpdatingPreferences,
@@ -153,21 +318,22 @@ const UserPreferencesPage: React.FC = () => {
 
   // --- State (Keep existing) ---
   const [isEditingDemographics, setIsEditingDemographics] = useState(false);
+  // ... (rest of state) ...
   const [showPreferenceModal, setShowPreferenceModal] = useState(false);
   const [editingPreferenceIndex, setEditingPreferenceIndex] = useState<
     number | null
   >(null);
 
-  // --- Forms ---
+  // --- Forms (Keep existing, Demographics form only targets user-provided fields) ---
   const {
-    register: registerDemo,
     handleSubmit: handleDemoSubmit,
     reset: resetDemoForm,
-    formState: { isDirty: isDemoDirty },
-  } = useForm<DemographicsFormData>();
+    control: demoControl, // Use control for Controller
+    formState: { isDirty: isDemoDirty, errors: demoErrors }, // Add errors
+  } = useForm<DemographicsFormData>(); // Form data is only for user-provided fields
 
+  // ... (Preference form remains the same) ...
   const {
-    register: registerPref,
     handleSubmit: handlePrefSubmit,
     reset: resetPrefForm,
     control: prefControl,
@@ -177,18 +343,39 @@ const UserPreferencesPage: React.FC = () => {
     defaultValues: { category: "", attributes: {}, score: 50 },
   });
 
+  // --- Effects (UPDATED demo form reset) ---
   useEffect(() => {
-    if (userProfile && !isEditingDemographics) {
+    // Reset the demographics form when the profile data loads or editing stops
+    if (userProfile?.demographicData && !isEditingDemographics) {
       resetDemoForm({
-        gender: userProfile?.demographicData?.gender || "",
-        age: userProfile?.demographicData?.age || undefined,
-        country: userProfile?.demographicData?.country || "",
-        incomeBracket: userProfile?.demographicData?.incomeBracket || "",
+        // Fields stored directly as user-provided in backend
+        gender: userProfile.demographicData.gender || null,
+        age: userProfile.demographicData.age || null,
+        country: userProfile.demographicData.country || null,
+        incomeBracket: userProfile.demographicData.incomeBracket || null,
+
+        // Fields currently ONLY inferred/verified in backend - initialize form to null
+        hasKids: null, // Or potentially pre-fill from inferred if desired, but form submits only the above 4
+        relationshipStatus: null,
+        employmentStatus: null,
+        educationLevel: null,
+      });
+    } else if (!isEditingDemographics) {
+      // If no profile data, reset all to null/defaults
+      resetDemoForm({
+        gender: null,
+        age: null,
+        country: null,
+        incomeBracket: null,
+        hasKids: null,
+        relationshipStatus: null,
+        employmentStatus: null,
+        educationLevel: null,
       });
     }
   }, [userProfile, isEditingDemographics, resetDemoForm]);
 
-  // Reset preference form when modal opens/closes or editing target changes
+  // ... (Preference form reset effect remains the same) ...
   useEffect(() => {
     if (showPreferenceModal) {
       if (
@@ -199,14 +386,13 @@ const UserPreferencesPage: React.FC = () => {
         const pref = preferencesData.preferences[editingPreferenceIndex];
         const formAttributes: Record<string, string | undefined> = {};
         if (pref.attributes) {
+          // Assuming pref.attributes is Record<string, Record<string, number>>
           Object.entries(pref.attributes).forEach(([key, valueObj]) => {
             let displayValue: string | undefined = undefined;
             if (typeof valueObj === "object" && valueObj !== null) {
-              // Attempt to get the first key if it's an object like { "Blue": 1.0 }
               const firstKey = Object.keys(valueObj)[0];
               if (firstKey) displayValue = firstKey;
             } else if (typeof valueObj === "string") {
-              // Handle simple string attributes if your API supports them
               displayValue = valueObj;
             }
             formAttributes[key] = displayValue;
@@ -217,8 +403,8 @@ const UserPreferencesPage: React.FC = () => {
           attributes: formAttributes,
           score:
             pref.score !== null && pref.score !== undefined
-              ? Math.round(pref.score * 100) // Convert 0-1 score to 0-100 for slider
-              : 50, // Default slider value
+              ? Math.round(pref.score * 100)
+              : 50,
         });
       } else {
         // Adding new preference
@@ -232,23 +418,24 @@ const UserPreferencesPage: React.FC = () => {
     resetPrefForm,
   ]);
 
-  // --- Memos ---
+  // --- Memos (Keep existing) ---
   const { categoryMap, attributeMap } = useMemo(() => {
+    // ... (implementation remains the same) ...
     const catMap = new Map<string, TaxonomyCategory>();
     const attrMap = new Map<string, Map<string, string>>(); // categoryId -> Map<attrName, attrDescription>
     if (taxonomyData?.categories) {
-      taxonomyData.categories.forEach((cat) => {
+      taxonomyData.categories.forEach((cat: TaxonomyCategory) => {
         catMap.set(cat.id, cat);
         const catAttrs = new Map<string, string>();
-        cat.attributes?.forEach((attr) => {
+        cat.attributes?.forEach((attr: TaxonomyAttribute) => {
           catAttrs.set(attr.name, attr.description || attr.name);
         });
         // Include parent attributes (simple one-level for now)
         if (cat.parent_id) {
           const parentCat = taxonomyData.categories.find(
-            (p) => p.id === cat.parent_id,
+            (p: TaxonomyCategory) => p.id === cat.parent_id,
           );
-          parentCat?.attributes?.forEach((attr) => {
+          parentCat?.attributes?.forEach((attr: TaxonomyAttribute) => {
             if (!catAttrs.has(attr.name)) {
               // Avoid overwriting child attributes
               catAttrs.set(attr.name, attr.description || attr.name);
@@ -267,45 +454,63 @@ const UserPreferencesPage: React.FC = () => {
   }, [selectedCategoryId, attributeMap]);
 
   // --- Handlers ---
-  const onDemoSubmit: SubmitHandler<DemographicsFormData> = (data) => {
-    // Filter out empty strings or nulls before sending
-    const payload: Partial<UserUpdate> = {}; // Use UserUpdate for payload type
-    if (data.gender && data.gender !== "") payload.gender = data.gender;
-    else payload.gender = null; // Explicitly set to null if empty
 
-    if (data.age !== undefined && data.age !== null && !isNaN(data.age))
-      payload.age = Number(data.age);
-    else payload.age = null; // Explicitly set to null if empty/invalid
+  // UPDATED: Demo Submit sends all user-provided fields
+  const onDemoSubmit: SubmitHandler<DemographicsFormData> = (data) => {
+    const payload: UserUpdate = {
+      demographicData: {},
+    };
 
-    if (data.country && data.country !== "") payload.country = data.country;
-    else payload.country = null; // Explicitly set to null if empty
+    // Only include fields the backend schema accepts as user-provided
+    payload.demographicData!.gender = data.gender || null;
+    payload.demographicData!.age = data.age ? Number(data.age) : null;
+    payload.demographicData!.country = data.country || null;
+    payload.demographicData!.incomeBracket = data.incomeBracket || null;
 
-    if (data.incomeBracket && data.incomeBracket !== "")
-      payload.incomeBracket = data.incomeBracket;
-    else payload.incomeBracket = null; // Explicitly set to null if empty
+    // DO NOT send hasKids, relationshipStatus etc. directly here
+    // unless the backend schema (dbSchemas.js) and update logic (UserProfileService.js)
+    // are modified to accept and store them as user-provided values.
+    // Verification flags are handled by handleVerifyDemographic.
 
     // Only submit if there are actual changes
-    if (Object.keys(payload).length > 0) {
-      updateProfile(payload as UserUpdate, {
-        onSuccess: () => setIsEditingDemographics(false),
+    if (isDemoDirty) {
+      updateProfile(payload, {
+        onSuccess: () => {
+          setIsEditingDemographics(false); // Close form on success
+          refetchUserProfile(); // Refetch to show updated data
+        },
       });
     } else {
-      // No changes detected, just exit edit mode
-      setIsEditingDemographics(false);
+      setIsEditingDemographics(false); // Close form if no changes were made
     }
   };
 
+  // NEW: Handler for verifying inferred data
+  const handleVerifyDemographic = (fieldName: keyof DemographicData) => {
+    const payload: UserUpdate = {
+      demographicData: {
+        [fieldName]: true, // Set the specific verification flag to true
+      },
+    };
+    updateProfile(payload, {
+      onSuccess: () => {
+        refetchUserProfile(); // Refetch profile to show updated status
+      },
+      // Optional: Add onError handling
+    });
+  };
+
+  // --- Preference Handlers (Keep existing) ---
   const onPrefSubmit: SubmitHandler<PreferenceFormData> = (data) => {
+    // ... (implementation remains the same) ...
     const currentPreferences = preferencesData?.preferences || [];
     let updatedPreferences: PreferenceItem[];
 
-    // Format attributes for the API: { "brand": { "Apple": 1.0 }, "color": { "Blue": 1.0 } }
     const apiAttributes: Record<string, { [key: string]: number }> = {};
     if (data.attributes) {
       Object.entries(data.attributes).forEach(([key, value]) => {
         if (value && value.trim() !== "") {
-          // Only include non-empty attributes
-          apiAttributes[key] = { [value.trim()]: 1.0 }; // Assign score 1.0
+          apiAttributes[key] = { [value.trim()]: 1.0 };
         }
       });
     }
@@ -313,16 +518,15 @@ const UserPreferencesPage: React.FC = () => {
     const newPrefItem: PreferenceItem = {
       category: data.category,
       attributes: apiAttributes,
-      score: data.score / 100, // Convert 0-100 slider value to 0-1 score
+      score: data.score / 100,
     };
 
     if (editingPreferenceIndex !== null) {
-      // Update existing preference
-      updatedPreferences = currentPreferences.map((pref, index) =>
-        index === editingPreferenceIndex ? newPrefItem : pref,
+      updatedPreferences = currentPreferences.map(
+        (pref, index) =>
+          index === editingPreferenceIndex ? newPrefItem : pref, // pref type is PreferenceItem
       );
     } else {
-      // Add new preference
       updatedPreferences = [...currentPreferences, newPrefItem];
     }
 
@@ -338,19 +542,22 @@ const UserPreferencesPage: React.FC = () => {
   };
 
   const handleRemovePreference = (indexToRemove: number) => {
+    // ... (implementation remains the same) ...
     const currentPreferences = preferencesData?.preferences || [];
     const updatedPreferences = currentPreferences.filter(
-      (_, index) => index !== indexToRemove,
+      (_: PreferenceItem, index: number) => index !== indexToRemove,
     );
     updatePreferences({ preferences: updatedPreferences });
   };
 
   const openAddModal = () => {
+    // ... (implementation remains the same) ...
     setEditingPreferenceIndex(null);
     setShowPreferenceModal(true);
   };
 
   const openEditModal = (index: number) => {
+    // ... (implementation remains the same) ...
     setEditingPreferenceIndex(index);
     setShowPreferenceModal(true);
   };
@@ -358,9 +565,10 @@ const UserPreferencesPage: React.FC = () => {
   // --- Render Logic ---
   const isLoading = profileLoading || preferencesLoading || taxonomyLoading;
   const error = profileError || preferencesError || taxonomyError;
-  const isMutating = isUpdatingProfile || isUpdatingPreferences;
+  const isMutating = isUpdatingProfile || isUpdatingPreferences; // Combined mutation state
 
-  if (isLoading) {
+  if (isLoading && !userProfile) {
+    // Show loading only if profile isn't loaded yet
     return <LoadingSpinner message="Loading preferences..." />;
   }
 
@@ -374,6 +582,9 @@ const UserPreferencesPage: React.FC = () => {
     );
   }
 
+  // Get demographic data safely
+  const demographics = userProfile?.demographicData;
+
   return (
     <div className="container mx-auto px-4 py-12">
       <h2 className="mb-8 text-3xl font-bold text-gray-900 dark:text-white">
@@ -381,23 +592,14 @@ const UserPreferencesPage: React.FC = () => {
       </h2>
 
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* --- Demographics Section (Left Column on Large Screens) --- */}
+        {/* --- Demographics Section (UPDATED) --- */}
         <Card className="lg:col-span-1">
           <div className="flex items-center justify-between">
             <h3 className="flex items-center text-xl font-semibold text-gray-900 dark:text-white">
               <HiUser className="mr-2 h-5 w-5" />
               About You
             </h3>
-            {!isEditingDemographics && (
-              <Button
-                color="light"
-                size="sm"
-                onClick={() => setIsEditingDemographics(true)}
-                disabled={isMutating}
-              >
-                <HiPencil className="mr-1 h-4 w-4" /> Edit
-              </Button>
-            )}
+            {/* Edit button is now handled within DemoInfoDisplay */}
           </div>
           {updateProfileError && (
             <Alert color="failure" icon={HiInformationCircle} className="mt-4">
@@ -405,92 +607,238 @@ const UserPreferencesPage: React.FC = () => {
             </Alert>
           )}
           {isEditingDemographics ? (
+            // --- EDIT FORM (Only User-Provided Fields) ---
             <form
               onSubmit={handleDemoSubmit(onDemoSubmit)}
-              className="mt-4 space-y-4" // Use space-y for consistent spacing
+              className="mt-4 space-y-4"
             >
-              {/* --- Gender Select --- */}
+              {/* Gender */}
               <div>
                 <Label htmlFor="gender">Gender</Label>
-                <Select
-                  id="gender"
-                  {...registerDemo("gender")} // Register the select
-                  className="mt-1"
-                  defaultValue={userProfile?.demographicData?.gender || ""} // Set default value for reset
-                >
-                  {genderOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </Select>
+                <Controller
+                  name="gender"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <Select
+                      id="gender"
+                      {...field}
+                      value={field.value ?? ""} // Handle null/undefined
+                      className="mt-1"
+                    >
+                      {genderOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
               </div>
+              {/* Age */}
               <div>
                 <Label htmlFor="age">Age</Label>
-                <TextInput
-                  id="age"
-                  type="number"
-                  {...registerDemo("age", { valueAsNumber: true })}
-                  placeholder="e.g., 30"
-                  min="0" // Add min value
-                  className="mt-1"
+                <Controller
+                  name="age"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <TextInput
+                      id="age"
+                      type="number"
+                      placeholder="e.g., 30"
+                      min="0"
+                      {...field}
+                      value={field.value ?? ""} // Handle null/undefined for input value
+                      onChange={(e) =>
+                        field.onChange(
+                          e.target.value === ""
+                            ? null
+                            : parseInt(e.target.value, 10),
+                        )
+                      } // Convert back to number or null
+                      className="mt-1"
+                    />
+                  )}
                 />
+                {demoErrors.age && (
+                  <p className="mt-1 text-sm text-red-600">
+                    {demoErrors.age.message}
+                  </p>
+                )}
               </div>
+              {/* Country */}
               <div>
                 <Label htmlFor="country">Country</Label>
-                <Select
-                  id="country"
-                  {...registerDemo("country")} // Register the select
-                  className="mt-1"
-                  defaultValue={userProfile?.demographicData?.country || ""} // Set default value
-                >
-                  {countryOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </Select>
+                <Controller
+                  name="country"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <Select
+                      id="country"
+                      {...field}
+                      value={field.value ?? ""} // Handle null/undefined
+                      className="mt-1"
+                    >
+                      {countryOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
               </div>
-              {/* --- Income Bracket Select --- */}
+              {/* Income Bracket */}
               <div>
                 <Label htmlFor="incomeBracket">Income Bracket</Label>
-                <Select
-                  id="incomeBracket"
-                  {...registerDemo("incomeBracket")} // Register the select
-                  className="mt-1"
-                  defaultValue={
-                    userProfile?.demographicData?.incomeBracket || ""
-                  } // Set default value for reset
-                >
-                  {incomeOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
-                      {option.label}
-                    </option>
-                  ))}
-                </Select>
+                <Controller
+                  name="incomeBracket"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <Select
+                      id="incomeBracket"
+                      {...field}
+                      value={field.value ?? ""} // Handle null/undefined
+                      className="mt-1"
+                    >
+                      {incomeOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+              </div>
+
+              {/* --- NEW Form Fields for Previously Inferred Data --- */}
+
+              {/* Has Kids */}
+              <div>
+                <Label htmlFor="hasKids">Do you have kids?</Label>
+                <Controller
+                  name="hasKids"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <Select
+                      id="hasKids"
+                      {...field}
+                      // Convert boolean/null to string for select value
+                      value={
+                        field.value === true
+                          ? "true"
+                          : field.value === false
+                            ? "false"
+                            : ""
+                      }
+                      onChange={(e) => {
+                        // Convert string back to boolean or null
+                        const value = e.target.value;
+                        field.onChange(
+                          value === "true"
+                            ? true
+                            : value === "false"
+                              ? false
+                              : null,
+                        );
+                      }}
+                      className="mt-1"
+                    >
+                      {hasKidsOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+              </div>
+
+              {/* Relationship Status */}
+              <div>
+                <Label htmlFor="relationshipStatus">Relationship Status</Label>
+                <Controller
+                  name="relationshipStatus"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <Select
+                      id="relationshipStatus"
+                      {...field}
+                      value={field.value ?? ""}
+                      className="mt-1"
+                    >
+                      {relationshipStatusOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
               </div>
-              <div className="mt-6 flex justify-end gap-3">
+
+              {/* Employment Status */}
+              <div>
+                <Label htmlFor="employmentStatus">Employment Status</Label>
+                <Controller
+                  name="employmentStatus"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <Select
+                      id="employmentStatus"
+                      {...field}
+                      value={field.value ?? ""}
+                      className="mt-1"
+                    >
+                      {employmentStatusOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+              </div>
+
+              {/* Education Level */}
+              <div>
+                <Label htmlFor="educationLevel">Education Level</Label>
+                <Controller
+                  name="educationLevel"
+                  control={demoControl}
+                  render={({ field }) => (
+                    <Select
+                      id="educationLevel"
+                      {...field}
+                      value={field.value ?? ""}
+                      className="mt-1"
+                    >
+                      {educationLevelOptions.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </Select>
+                  )}
+                />
+              </div>
+              {/* --- End NEW Form Fields --- */}
+
+              {/* Form Actions */}
+              <div className="flex justify-end space-x-3 pt-2">
                 <Button
                   color="gray"
-                  onClick={() => {
-                    setIsEditingDemographics(false);
-                    // Reset form to original values on cancel
-                    resetDemoForm({
-                      gender: userProfile?.demographicData?.gender || "",
-                      age: userProfile?.demographicData?.age || undefined,
-                      country: userProfile?.demographicData?.country || "",
-                      incomeBracket:
-                        userProfile?.demographicData?.incomeBracket || "",
-                    });
-                  }}
+                  onClick={() => setIsEditingDemographics(false)}
                   disabled={isMutating}
                 >
                   Cancel
                 </Button>
-                <Button type="submit" disabled={isMutating || !isDemoDirty}>
+                <Button
+                  type="submit"
+                  disabled={isMutating || !isDemoDirty} // Disable if mutating or no changes
+                >
                   {isUpdatingProfile ? (
                     <>
-                      <Spinner size="sm" className="mr-2" /> Saving...
+                      <Spinner size="sm" className="mr-3" /> Saving...
                     </>
                   ) : (
                     "Save Changes"
@@ -499,45 +847,128 @@ const UserPreferencesPage: React.FC = () => {
               </div>
             </form>
           ) : (
-            // --- DISPLAY VIEW ---
-            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
-              <DemoInfoCard
-                icon={HiOutlineUserCircle}
+            // --- DISPLAY VIEW (User-Provided + Inferred) ---
+            <div className="mt-4 space-y-3">
+              {/* Gender */}
+              <DemoInfoDisplay
+                icon={HiOutlineIdentification}
                 label="Gender"
-                value={userProfile?.demographicData?.gender}
-                isLoading={profileLoading}
+                userProvidedValue={demographics?.gender} // Correct
+                inferredValue={demographics?.inferredGender}
+                isVerified={demographics?.genderIsVerified}
+                verificationFieldName="genderIsVerified"
+                onVerify={handleVerifyDemographic}
+                onEdit={() => setIsEditingDemographics(true)}
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
               />
-              <DemoInfoCard
-                icon={HiOutlineCake}
+              {/* Age */}
+              <DemoInfoDisplay
+                icon={HiOutlineCalendar}
                 label="Age"
-                value={userProfile?.demographicData?.age}
-                isLoading={profileLoading}
+                userProvidedValue={demographics?.age} // Correct
+                inferredValue={demographics?.inferredAgeBracket} // Still show inferred bracket if age not set
+                isVerified={demographics?.ageBracketIsVerified} // Verification applies to bracket
+                verificationFieldName="ageBracketIsVerified"
+                onVerify={handleVerifyDemographic}
+                onEdit={() => setIsEditingDemographics(true)}
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
               />
-              <DemoInfoCard
+              {/* Country */}
+              <DemoInfoDisplay
                 icon={HiOutlineGlobeAlt}
                 label="Country"
-                value={userProfile?.demographicData?.country}
-                isLoading={profileLoading}
+                userProvidedValue={demographics?.country} // Correct
+                // No inferred value for country
+                onEdit={() => setIsEditingDemographics(true)}
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
+              />
+              {/* Income */}
+              <DemoInfoDisplay
+                icon={HiOutlineCurrencyDollar}
+                label="Income Bracket"
+                userProvidedValue={demographics?.incomeBracket} // Correct
+                // No inferred value for income
+                onEdit={() => setIsEditingDemographics(true)}
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
+              />
+              {/* Has Kids */}
+              <DemoInfoDisplay
+                icon={HiOutlineUserGroup}
+                label="Has Kids"
+                userProvidedValue={null} // No direct user-provided field in current backend schema
+                inferredValue={demographics?.inferredHasKids}
+                isVerified={demographics?.hasKidsIsVerified}
+                verificationFieldName="hasKidsIsVerified"
+                onVerify={handleVerifyDemographic}
+                onEdit={() => setIsEditingDemographics(true)} // Allow editing (form collects input, but submit might ignore it)
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
+              />
+              {/* Relationship Status */}
+              <DemoInfoDisplay
+                icon={HiOutlineUsers}
+                label="Relationship Status"
+                userProvidedValue={null} // No direct user-provided field
+                inferredValue={demographics?.inferredRelationshipStatus}
+                isVerified={demographics?.relationshipStatusIsVerified}
+                verificationFieldName="relationshipStatusIsVerified"
+                onVerify={handleVerifyDemographic}
+                onEdit={() => setIsEditingDemographics(true)} // Allow editing
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
               />
-              <DemoInfoCard
-                icon={HiOutlineCash}
-                label="Income"
-                value={userProfile?.demographicData?.incomeBracket}
-                isLoading={profileLoading}
+              {/* Employment Status */}
+              <DemoInfoDisplay
+                icon={HiOutlineBriefcase}
+                label="Employment Status"
+                userProvidedValue={null} // No direct user-provided field
+                inferredValue={demographics?.inferredEmploymentStatus}
+                isVerified={demographics?.employmentStatusIsVerified}
+                verificationFieldName="employmentStatusIsVerified"
+                onVerify={handleVerifyDemographic}
+                onEdit={() => setIsEditingDemographics(true)} // Allow editing
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
+              />
+              {/* Education Level */}
+              <DemoInfoDisplay
+                icon={HiOutlineAcademicCap}
+                label="Education Level"
+                userProvidedValue={null} // No direct user-provided field
+                inferredValue={demographics?.inferredEducationLevel}
+                isVerified={demographics?.educationLevelIsVerified}
+                verificationFieldName="educationLevelIsVerified"
+                onVerify={handleVerifyDemographic}
+                onEdit={() => setIsEditingDemographics(true)} // Allow editing
+                isLoading={profileLoading && !demographics}
+                isMutating={isUpdatingProfile}
+                isEditingDemographics={isEditingDemographics}
               />
             </div>
           )}
         </Card>
 
-        {/* --- Preferences Section (Right Column on Large Screens) --- */}
+        {/* --- Preferences Section (Right Columns on Large Screens) --- */}
         <Card className="lg:col-span-2">
+          {/* ... (Preference list and modal rendering remains the same) ... */}
           <div className="flex items-center justify-between">
             <h3 className="flex items-center text-xl font-semibold text-gray-900 dark:text-white">
-              <HiSparkles className="mr-2 h-5 w-5" />
+              <HiOutlineHeart className="mr-2 h-5 w-5" /> {/* Example Icon */}
               Your Interests
             </h3>
             <Button
-              color="blue"
+              color="success"
               size="sm"
               onClick={openAddModal}
               disabled={isMutating}
@@ -550,222 +981,218 @@ const UserPreferencesPage: React.FC = () => {
               Failed to update preferences: {updatePreferencesError.message}
             </Alert>
           )}
-          {isUpdatingPreferences && !showPreferenceModal && (
-            <div className="my-4 flex items-center justify-center text-sm text-gray-500 dark:text-gray-400">
-              <Spinner size="sm" /> <span className="ml-2">Saving...</span>
+          {preferencesLoading ? (
+            <div className="flex justify-center py-6">
+              <Spinner size="md" />
             </div>
-          )}
-          <div className="mt-4">
-            {preferencesData?.preferences &&
+          ) : preferencesData?.preferences &&
             preferencesData.preferences.length > 0 ? (
-              <List unstyled className="space-y-3">
-                {preferencesData.preferences.map((pref, index) => {
-                  // Extract attribute display logic
-                  const attributesDisplay =
-                    pref.attributes &&
-                    Object.entries(pref.attributes).map(([key, valueObj]) => {
-                      let displayValue = "[Complex Value]";
-                      if (typeof valueObj === "object" && valueObj !== null) {
-                        const firstKey = Object.keys(valueObj)[0];
-                        if (firstKey) displayValue = firstKey;
-                      } else if (typeof valueObj === "string") {
-                        displayValue = valueObj;
-                      }
-                      return { key, displayValue };
-                    });
-
-                  return (
-                    <ListItem
-                      key={index}
-                      className="flex flex-col items-start rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
-                    >
-                      <div className="mb-3 flex-grow sm:mb-0">
-                        <span className="block text-base font-semibold text-gray-800 dark:text-gray-200">
-                          {categoryMap.get(pref.category || "")?.name ||
-                            "Unknown Category"}
-                        </span>
-                        <span className="block text-sm text-gray-600 dark:text-gray-400">
-                          Score:{" "}
-                          {pref.score !== null && pref.score !== undefined
-                            ? Math.round(pref.score * 100)
-                            : "N/A"}
-                        </span>
-                        {attributesDisplay && attributesDisplay.length > 0 && (
-                          <div className="mt-1 text-xs">
-                            {attributesDisplay.map(({ key, displayValue }) => (
-                              <span
-                                key={key}
-                                className="mt-1 mr-1.5 inline-block rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-600 dark:text-gray-200"
-                              >
-                                <span className="font-medium">
-                                  {attributeMap
-                                    .get(pref.category || "")
-                                    ?.get(key) || key}
-                                  :
-                                </span>{" "}
-                                {displayValue}
-                              </span>
-                            ))}
-                          </div>
+            <List
+              unstyled
+              className="mt-4 divide-y divide-gray-200 dark:divide-gray-700"
+            >
+              {preferencesData.preferences.map((pref, index) => (
+                <ListItem key={index} className="py-3 sm:py-4">
+                  {" "}
+                  {/* pref type is PreferenceItem */}
+                  <div className="flex items-center space-x-4">
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
+                        {categoryMap.get(pref.category)?.name || pref.category}
+                      </p>
+                      {/* Check if attributes is a non-null object before processing */}
+                      {pref.attributes &&
+                        typeof pref.attributes === "object" &&
+                        Object.keys(pref.attributes).length > 0 && (
+                          <p className="truncate text-sm text-gray-500 dark:text-gray-400">
+                            {Object.entries(pref.attributes)
+                              .map(([key, valueObj]) => {
+                                // Ensure valueObj is also an object before getting keys
+                                if (
+                                  typeof valueObj === "object" &&
+                                  valueObj !== null
+                                ) {
+                                  const value = Object.keys(valueObj)[0]; // Get the first key (value)
+                                  return `${key}: ${value}`;
+                                }
+                                return `${key}: N/A`; // Fallback if valueObj is not as expected
+                              })
+                              .join(", ")}
+                          </p>
                         )}
-                      </div>
-                      <div className="flex flex-shrink-0 gap-2 self-end sm:self-center">
+                    </div>
+                    <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
+                      {/* Display score as percentage */}
+                      {pref.score !== null && pref.score !== undefined
+                        ? `${Math.round(pref.score * 100)}%`
+                        : "N/A"}
+                    </div>
+                    <div className="flex space-x-2">
+                      <Tooltip content="Edit this interest">
                         <Button
-                          size="xs"
                           color="light"
+                          size="xs"
                           onClick={() => openEditModal(index)}
                           disabled={isMutating}
-                          aria-label="Edit interest"
                         >
-                          <HiPencil />
+                          <HiPencil className="h-4 w-4" />
                         </Button>
+                      </Tooltip>
+                      <Tooltip content="Remove this interest">
                         <Button
-                          size="xs"
                           color="failure"
-                          outline
+                          size="xs"
                           onClick={() => handleRemovePreference(index)}
                           disabled={isMutating}
-                          aria-label="Delete interest"
                         >
-                          <HiTrash />
+                          <HiTrash className="h-4 w-4" /> {/* Example Icon */}
                         </Button>
-                      </div>
-                    </ListItem>
-                  );
-                })}
-              </List>
-            ) : (
-              <p className="text-center text-gray-500 dark:text-gray-400">
-                You haven't added any specific interests yet. Click "Add
-                Interest" to get started.
-              </p>
-            )}
-          </div>
+                      </Tooltip>
+                    </div>
+                  </div>
+                </ListItem>
+              ))}
+            </List>
+          ) : (
+            <p className="mt-4 text-center text-gray-500 dark:text-gray-400">
+              You haven't added any specific interests yet. Add some to help
+              personalize your experience!
+            </p>
+          )}
         </Card>
       </div>
 
-      {/* --- Preference Add/Edit Modal --- */}
+      {/* --- Preference Edit/Add Modal --- */}
       <Modal
         show={showPreferenceModal}
-        onClose={() => !isMutating && setShowPreferenceModal(false)}
-        size="lg" // Slightly larger modal
+        onClose={() => setShowPreferenceModal(false)}
       >
         <ModalHeader>
-          {editingPreferenceIndex !== null
-            ? "Edit Interest"
-            : "Add New Interest"}
+          {editingPreferenceIndex !== null ? "Edit Interest" : "Add Interest"}
         </ModalHeader>
-        <form onSubmit={handlePrefSubmit(onPrefSubmit)}>
-          <ModalBody className="space-y-6">
+        <ModalBody>
+          <form
+            id="preference-form"
+            onSubmit={handlePrefSubmit(onPrefSubmit)}
+            className="space-y-4"
+          >
             {/* Category Select */}
             <div>
-              <Label htmlFor="category">Interest Category</Label>
-              <Select
-                id="category"
-                {...registerPref("category", {
-                  required: "Category is required",
-                })}
-                color={prefErrors.category ? "failure" : "gray"}
-                disabled={editingPreferenceIndex !== null} // Disable category change when editing
-                required
-              >
-                <option value="" disabled>
-                  Select a category...
-                </option>
-                {Array.from(categoryMap.values())
-                  .filter((cat) => cat.id) // Ensure category has an ID
-                  .sort((a, b) => a.name.localeCompare(b.name))
-                  .map((cat) => (
-                    <option key={cat.id} value={cat.id}>
-                      {cat.name}
-                    </option>
-                  ))}
-              </Select>
+              <Label htmlFor="category">Category *</Label>
+              <Controller
+                name="category"
+                control={prefControl}
+                rules={{ required: "Category is required" }}
+                render={({ field }) => (
+                  <Select id="category" {...field} className="mt-1">
+                    <option value="">Select a Category</option>
+                    {taxonomyData?.categories
+                      ?.sort((a: TaxonomyCategory, b: TaxonomyCategory) =>
+                        a.name.localeCompare(b.name),
+                      ) // Sort categories alphabetically
+                      .map(
+                        (
+                          cat: TaxonomyCategory, // cat type is TaxonomyCategory
+                        ) => (
+                          <option key={cat.id} value={cat.id}>
+                            {cat.name}
+                          </option>
+                        ),
+                      )}
+                  </Select>
+                )}
+              />
               {prefErrors.category && (
-                <p className="mt-1 text-xs text-red-600 dark:text-red-400">
+                <p className="mt-1 text-sm text-red-600">
                   {prefErrors.category.message}
                 </p>
               )}
             </div>
 
-            {/* Attributes */}
+            {/* Dynamic Attributes */}
             {selectedCategoryId && availableAttributes.size > 0 && (
-              <fieldset className="rounded border p-4 dark:border-gray-600">
-                <legend className="-ml-1 px-1 text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Refine Interest (Optional)
-                </legend>
-                <div className="grid grid-cols-1 gap-4 pt-3 sm:grid-cols-2">
+              <Card>
+                {" "}
+                {/* Wrap attributes in a card for better visual grouping */}
+                <h4 className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Refine by Attributes (Optional)
+                </h4>
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                   {Array.from(availableAttributes.entries()).map(
                     ([attrName, attrDesc]) => (
                       <div key={attrName}>
-                        <Label
-                          htmlFor={`attr-${attrName}`}
-                          className="mb-1 text-xs"
-                        >
+                        <Label htmlFor={`attr-${attrName}`} className="text-xs">
                           {attrDesc || attrName}
                         </Label>
-                        <TextInput
-                          id={`attr-${attrName}`}
-                          {...registerPref(`attributes.${attrName}`)}
-                          placeholder={`e.g., ${attrName === "color" ? "Blue" : attrName === "brand" ? "Acme" : "Any"}`}
-                          className="text-sm"
+                        <Controller
+                          name={`attributes.${attrName}`}
+                          control={prefControl}
+                          render={({ field }) => (
+                            <TextInput
+                              id={`attr-${attrName}`}
+                              placeholder={`e.g., Blue, Large, Apple`} // Provide example
+                              {...field}
+                              value={field.value || ""} // Ensure controlled component
+                              className="mt-1"
+                            />
+                          )}
                         />
                       </div>
                     ),
                   )}
                 </div>
-              </fieldset>
+              </Card>
             )}
 
             {/* Score Slider */}
             <div>
-              <Label htmlFor="score">Interest Score (0-100)</Label>
+              <Label htmlFor="score">{`Interest Score: ${watchPref("score")}%`}</Label>
               <Controller
                 name="score"
                 control={prefControl}
-                render={({ field: { onChange, value } }) => (
-                  <div className="mt-1 flex items-center gap-4">
-                    <RangeSlider
-                      id="score"
-                      min={0}
-                      max={100}
-                      value={value ?? 50}
-                      onChange={(e) => onChange(parseInt(e.target.value, 10))}
-                      className="flex-grow"
-                    />
-                    <span className="w-10 text-right text-sm font-medium text-gray-900 dark:text-white">
-                      {value ?? 50}
-                    </span>
-                  </div>
+                render={({ field }) => (
+                  <RangeSlider
+                    id="score"
+                    min={0}
+                    max={100}
+                    step={5}
+                    {...field}
+                    className="mt-1"
+                  />
                 )}
               />
-              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                How interested are you in this category? (0 = Not at all, 100 =
-                Very interested)
-              </p>
             </div>
-          </ModalBody>
-          <ModalFooter className="justify-end">
-            <Button
-              color="gray"
-              onClick={() => setShowPreferenceModal(false)}
-              disabled={isMutating}
-            >
-              Cancel
-            </Button>
-            <Button type="submit" disabled={isMutating}>
-              {isUpdatingPreferences ? (
-                <>
-                  <Spinner size="sm" className="mr-2" /> Saving...
-                </>
-              ) : editingPreferenceIndex !== null ? (
-                "Save Changes"
-              ) : (
-                "Add Interest"
-              )}
-            </Button>
-          </ModalFooter>
-        </form>
+          </form>
+          {updatePreferencesError && (
+            <Alert color="failure" icon={HiInformationCircle} className="mt-2">
+              Failed to save interest: {updatePreferencesError.message}
+            </Alert>
+          )}
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            color="gray"
+            onClick={() => setShowPreferenceModal(false)}
+            disabled={isUpdatingPreferences}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            form="preference-form" // Link button to the form
+            disabled={isUpdatingPreferences}
+          >
+            {isUpdatingPreferences ? (
+              <>
+                <Spinner size="sm" className="mr-3" /> Saving...
+              </>
+            ) : editingPreferenceIndex !== null ? (
+              "Save Changes"
+            ) : (
+              "Add Interest"
+            )}
+          </Button>
+        </ModalFooter>
       </Modal>
     </div>
   );

From 6930423d36e71718b2e2f9ed0cb000e526c0a20e Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sat, 26 Apr 2025 20:41:30 +0530
Subject: [PATCH 08/21] fix: Align demographic cards to the top in
 UserPreferencesPage

---
 web/src/pages/UserDashboard/UserPreferencesPage.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index 8a8456c..4b499a6 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -33,7 +33,7 @@ import {
   HiQuestionMarkCircle, // Icon for inferred/unverified
   HiTrash,
   HiPlus,
-  HiOutlineHeart, // Icon for correcting
+  HiOutlineHeart,
 } from "react-icons/hi";
 import {
   useUserProfile,
@@ -591,7 +591,8 @@ const UserPreferencesPage: React.FC = () => {
         Manage Your Profile & Interests
       </h2>
 
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+      {/* Add items-start to align cards to the top */}
+      <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
         {/* --- Demographics Section (UPDATED) --- */}
         <Card className="lg:col-span-1">
           <div className="flex items-center justify-between">

From 1c265687879168f65b5a1df3ae5124a0a6858cbf Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 02:33:47 +0530
Subject: [PATCH 09/21] Revert "fix: Align demographic cards to the top in
 UserPreferencesPage"

This reverts commit 6930423d36e71718b2e2f9ed0cb000e526c0a20e.
---
 web/src/pages/UserDashboard/UserPreferencesPage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index 4b499a6..8a8456c 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -33,7 +33,7 @@ import {
   HiQuestionMarkCircle, // Icon for inferred/unverified
   HiTrash,
   HiPlus,
-  HiOutlineHeart,
+  HiOutlineHeart, // Icon for correcting
 } from "react-icons/hi";
 import {
   useUserProfile,
@@ -591,8 +591,7 @@ const UserPreferencesPage: React.FC = () => {
         Manage Your Profile & Interests
       </h2>
 
-      {/* Add items-start to align cards to the top */}
-      <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
         {/* --- Demographics Section (UPDATED) --- */}
         <Card className="lg:col-span-1">
           <div className="flex items-center justify-between">

From 2af5fbb7a4574bf593707d4c08cbde25f4a4e57b Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 02:34:20 +0530
Subject: [PATCH 10/21] Revert "Refactor code structure for improved
 readability and maintainability"

This reverts commit 6d89ade278f69af381730a319fc0f666c2a27b2d.
---
 web/src/api/hooks/useSystemHooks.ts           |    6 +-
 web/src/api/hooks/useUserHooks.ts             |   82 +-
 .../UserDashboard/UserPreferencesPage.tsx     | 1131 +++++------------
 3 files changed, 372 insertions(+), 847 deletions(-)

diff --git a/web/src/api/hooks/useSystemHooks.ts b/web/src/api/hooks/useSystemHooks.ts
index 322d41f..4a2257b 100644
--- a/web/src/api/hooks/useSystemHooks.ts
+++ b/web/src/api/hooks/useSystemHooks.ts
@@ -5,7 +5,7 @@ import { HealthStatus, PingStatus, Error } from "../types/data-contracts";
 
 export function useHealthCheck() {
   // Destructure apiClients first, then get health from it
-  const { apiClients, clientsReady } = useApiClients(); // Get clientsReady
+  const { apiClients } = useApiClients();
   const { health } = apiClients; // Now get health client
 
   // Adjust the useQuery generic to expect HealthStatus as the data type
@@ -13,14 +13,13 @@ export function useHealthCheck() {
     queryKey: cacheKeys.system.health(),
     // Ensure health client exists before calling
     queryFn: () => health.healthCheck().then((res) => res.data),
-    enabled: clientsReady, // Only run when client is ready
     ...cacheSettings.system,
   });
 }
 
 export function usePing() {
   // Destructure apiClients first, then get ping from it
-  const { apiClients, clientsReady } = useApiClients(); // Get clientsReady
+  const { apiClients } = useApiClients();
   const { ping } = apiClients; // Now get ping client
 
   // Adjust the useQuery generic to expect PingStatus as the data type
@@ -28,7 +27,6 @@ export function usePing() {
     queryKey: cacheKeys.system.ping(),
     // Ensure ping client exists before calling
     queryFn: () => ping.ping().then((res) => res.data), // queryFn returns PingStatus
-    enabled: clientsReady, // Only run when client is ready
     ...cacheSettings.system,
     // Ping doesn't require auth, so no enabled check needed here
   });
diff --git a/web/src/api/hooks/useUserHooks.ts b/web/src/api/hooks/useUserHooks.ts
index 38dbadb..17e81ae 100644
--- a/web/src/api/hooks/useUserHooks.ts
+++ b/web/src/api/hooks/useUserHooks.ts
@@ -1,9 +1,4 @@
-import {
-  useMutation,
-  useQuery,
-  useQueryClient,
-  QueryKey,
-} from "@tanstack/react-query"; // Import QueryKey
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useApiClients } from "../apiClient";
 import { cacheKeys, cacheSettings, optimisticUpdates } from "../utils/cache";
 import {
@@ -15,25 +10,15 @@ import {
   MonthlySpendingAnalytics,
   GetSpendingAnalyticsParams,
   GetRecentUserDataParams, // <-- Import params type for recent data
-  Error, // <-- Import Error type
 } from "../types/data-contracts";
 import { useAuth } from "../../hooks/useAuth"; // Import useAuth
 
-// Define a type for the context returned by onMutate
-interface MutationContext {
-  previousData?: User | undefined;
-  queryKey?: QueryKey;
-}
-
 export function useUserProfile() {
   const { apiClients, clientsReady } = useApiClients();
-  const { isAuthenticated, isLoading: authLoading } = useAuth(); // Get auth state
-  return useQuery<User, Error>({
-    // Specify types
+  return useQuery({
     queryKey: cacheKeys.users.profile(),
     queryFn: () => apiClients.users.getUserProfile().then((res) => res.data),
-    // Update enabled check
-    enabled: isAuthenticated && !authLoading && clientsReady,
+    enabled: clientsReady,
     ...cacheSettings.user,
   });
 }
@@ -42,16 +27,11 @@ export function useUpdateUserProfile() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation<User, Error, UserUpdate>({
-    // Specify types
+  return useMutation({
     mutationFn: (userData: UserUpdate) =>
       apiClients.users.updateUserProfile(userData).then((res) => res.data),
-    onSuccess: (updatedUser) => {
-      // Can use updatedUser if needed
-      // Invalidate or directly update the cache
-      queryClient.setQueryData(cacheKeys.users.profile(), updatedUser);
-      // Optionally invalidate if optimistic updates aren't enough or for related data
-      // queryClient.invalidateQueries({ queryKey: cacheKeys.users.profile() });
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: cacheKeys.users.profile() });
     },
   });
 }
@@ -62,7 +42,6 @@ export function useUserPreferences() {
   const { isAuthenticated, isLoading: authLoading } = useAuth(); // Get auth state
 
   return useQuery({
-    // Add types if UserPreferences type exists
     queryKey: cacheKeys.users.preferences(),
     queryFn: () =>
       apiClients.users.getUserOwnPreferences().then((res) => res.data),
@@ -77,22 +56,14 @@ export function useUpdateUserPreferences() {
   const queryClient = useQueryClient();
 
   return useMutation({
-    // Add types if UserPreferences type exists
     mutationFn: (preferences: UserPreferencesUpdate) =>
       apiClients.users
         .updateUserPreferences(preferences)
         .then((res) => res.data),
-    onSuccess: (updatedPreferences) => {
-      // Can use updatedPreferences
-      // Invalidate or directly update the cache
-      queryClient.setQueryData(
-        cacheKeys.users.preferences(),
-        updatedPreferences,
-      );
-      // Optionally invalidate
-      // queryClient.invalidateQueries({
-      //   queryKey: cacheKeys.users.preferences(),
-      // });
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: cacheKeys.users.preferences(),
+      });
     },
   });
 }
@@ -101,9 +72,7 @@ export function useOptInToStore() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation<void, Error, string, MutationContext>({
-    // Add MutationContext type
-    // Specify types
+  return useMutation({
     mutationFn: (storeId: string) =>
       apiClients.users.optInToStore(storeId).then((res) => res.data),
     onMutate: async (storeId) => {
@@ -113,24 +82,18 @@ export function useOptInToStore() {
       const previousData = queryClient.getQueryData<User>(queryKey); // <--- Use User type
 
       // Apply optimistic update (which now targets the profile cache)
-      if (previousData) {
-        optimisticUpdates.optInStore(storeId); // Apply optimistic update locally
-      }
+      optimisticUpdates.optInStore(storeId);
 
       return { previousData, queryKey }; // Pass queryKey for rollback/settled
     },
     onError: (_err, _variables, context) => {
-      // Context is now typed
       // Rollback on error using the correct key and data
-      // Check if context and its properties exist before using them
-      if (context?.queryKey && context.previousData !== undefined) {
+      if (context?.previousData) {
         queryClient.setQueryData(context.queryKey, context.previousData);
       }
     },
     onSettled: (_data, _error, _variables, context) => {
-      // Context is now typed
       // Invalidate the USER PROFILE cache on settled
-      // Check if context and queryKey exist
       if (context?.queryKey) {
         queryClient.invalidateQueries({ queryKey: context.queryKey });
       }
@@ -146,9 +109,7 @@ export function useOptOutFromStore() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation<void, Error, string, MutationContext>({
-    // Add MutationContext type
-    // Specify types
+  return useMutation({
     mutationFn: (storeId: string) =>
       apiClients.users.optOutFromStore(storeId).then((res) => res.data),
     onMutate: async (storeId) => {
@@ -158,24 +119,18 @@ export function useOptOutFromStore() {
       const previousData = queryClient.getQueryData<User>(queryKey); // <--- Use User type
 
       // Apply optimistic update (which now targets the profile cache)
-      if (previousData) {
-        optimisticUpdates.optOutStore(storeId); // Apply optimistic update locally
-      }
+      optimisticUpdates.optOutStore(storeId);
 
       return { previousData, queryKey }; // Pass queryKey for rollback/settled
     },
     onError: (_err, _variables, context) => {
-      // Context is now typed
       // Rollback on error using the correct key and data
-      // Check if context and its properties exist before using them
-      if (context?.queryKey && context.previousData !== undefined) {
+      if (context?.previousData) {
         queryClient.setQueryData(context.queryKey, context.previousData);
       }
     },
     onSettled: (_data, _error, _variables, context) => {
-      // Context is now typed
       // Invalidate the USER PROFILE cache on settled
-      // Check if context and queryKey exist
       if (context?.queryKey) {
         queryClient.invalidateQueries({ queryKey: context.queryKey });
       }
@@ -191,14 +146,13 @@ export function useDeleteUserProfile() {
   const { apiClients } = useApiClients();
   const queryClient = useQueryClient();
 
-  return useMutation<void, Error, void>({
-    // Specify types
+  return useMutation({
     mutationFn: () =>
       apiClients.users.deleteUserProfile().then((res) => res.data),
     onSuccess: () => {
       // After successful deletion, clear user-related cache
       queryClient.invalidateQueries({ queryKey: ["auth", "metadata"] });
-      queryClient.invalidateQueries({ queryKey: cacheKeys.users.all }); // Invalidate all user queries
+      queryClient.invalidateQueries({ queryKey: ["users"] });
     },
   });
 }
diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index 8a8456c..32f17dd 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react"; // Add React import
+import React, { useState, useEffect, useMemo } from "react";
 import {
   Card,
   Button,
@@ -10,71 +10,52 @@ import {
   ModalFooter,
   Label,
   TextInput,
-  Select,
+  Select, // Already imported
   RangeSlider,
   List,
   ListItem,
-  Badge, // Import Badge
-  Tooltip, // Import Tooltip
 } from "flowbite-react";
 import {
-  HiUser,
-  HiPencil,
   HiInformationCircle,
-  HiOutlineCalendar, // Example icon for Age
-  HiOutlineGlobeAlt, // Example icon for Country
-  HiOutlineCurrencyDollar, // Example icon for Income
-  HiOutlineIdentification, // Example icon for Gender
-  HiOutlineUsers, // Example icon for Relationship
-  HiOutlineBriefcase, // Example icon for Employment
-  HiOutlineAcademicCap, // Example icon for Education
-  HiOutlineUserGroup, // Example icon for Kids
-  HiCheckCircle, // Icon for verified
-  HiQuestionMarkCircle, // Icon for inferred/unverified
+  HiPencil,
   HiTrash,
   HiPlus,
-  HiOutlineHeart, // Icon for correcting
+  HiUser,
+  HiSparkles,
+  HiOutlineUserCircle,
+  HiOutlineCake,
+  HiOutlineGlobeAlt,
+  HiOutlineCash,
 } from "react-icons/hi";
 import {
   useUserProfile,
   useUserPreferences,
-  useUpdateUserProfile, // Import the hook
+  useUpdateUserProfile,
   useUpdateUserPreferences,
-} from "../../api/hooks/useUserHooks"; // Adjust path as needed
-import { useTaxonomy } from "../../api/hooks/useTaxonomyHooks"; // Import useTaxonomy separately
+} from "../../api/hooks/useUserHooks";
+import { useTaxonomy } from "../../api/hooks/useTaxonomyHooks";
 import {
   UserUpdate,
   PreferenceItem,
   TaxonomyCategory,
-  DemographicData, // Import DemographicData type
-  TaxonomyAttribute, // Import TaxonomyAttribute type
-} from "../../api/types/data-contracts"; // Adjust path as needed
+} from "../../api/types/data-contracts";
 import LoadingSpinner from "../../components/common/LoadingSpinner";
 import ErrorDisplay from "../../components/common/ErrorDisplay";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
-import countryData from "../../data/countries.json";
+import countryData from "../../data/countries.json"; // <-- Import country data
 
 // --- Form Types ---
-// This form now handles ALL demographic fields the user can provide
-type DemographicsFormData = {
-  gender?: DemographicData["gender"];
-  age?: DemographicData["age"];
-  country?: DemographicData["country"];
-  incomeBracket?: DemographicData["incomeBracket"];
-  // Add fields that were previously only inferred
-  hasKids?: boolean | null; // Use boolean for hasKids
-  relationshipStatus?: DemographicData["inferredRelationshipStatus"];
-  employmentStatus?: DemographicData["inferredEmploymentStatus"];
-  educationLevel?: DemographicData["inferredEducationLevel"];
-};
-// ... (PreferenceFormData remains the same) ...
+type DemographicsFormData = Pick<
+  UserUpdate,
+  "gender" | "age" | "country" | "incomeBracket"
+>;
 type PreferenceFormData = {
   category: string;
   score: number;
   attributes?: Record<string, string | undefined>;
 };
 
-// --- Define options for selects (Keep existing) ---
+// --- Define options for selects (copied from UserRegistrationForm) ---
 const genderOptions = [
   { value: "", label: "Select Gender" },
   { value: "male", label: "Male" },
@@ -84,7 +65,7 @@ const genderOptions = [
 ];
 
 const incomeOptions = [
-  { value: "", label: "Select Income Bracket" },
+  { value: "", label: "Select Income Bracket" }, // Make placeholder less optional here
   { value: "<25k", label: "< $25,000" },
   { value: "25k-50k", label: "$25,000 - $49,999" },
   { value: "50k-100k", label: "$50,000 - $99,999" },
@@ -93,7 +74,7 @@ const incomeOptions = [
   { value: "prefer_not_to_say", label: "Prefer not to say" },
 ];
 
-// --- Country Options (Keep existing) ---
+// --- Country Options (copied from UserRegistrationForm) ---
 interface CountryOption {
   value: string;
   label: string;
@@ -103,195 +84,50 @@ const typedCountryData: CountryOption[] = Object.entries(countryData).map(
 );
 typedCountryData.sort((a, b) => a.label.localeCompare(b.label));
 const countryOptions: CountryOption[] = [
-  { value: "", label: "Select Country" },
+  { value: "", label: "Select Country" }, // Make placeholder less optional here
   ...typedCountryData,
 ];
+// --- End Country Options ---
 
-// --- NEW Options for Inferred Fields ---
-const hasKidsOptions = [
-  { value: "", label: "Select Option" }, // Represents null
-  { value: "true", label: "Yes" },
-  { value: "false", label: "No" },
-];
-
-const relationshipStatusOptions = [
-  { value: "", label: "Select Status" }, // Represents null
-  { value: "single", label: "Single" },
-  { value: "relationship", label: "In a Relationship" },
-  { value: "married", label: "Married" },
-  // Add other relevant options if needed, matching the enum in DemographicData
-];
-
-const employmentStatusOptions = [
-  { value: "", label: "Select Status" }, // Represents null
-  { value: "employed", label: "Employed" },
-  { value: "unemployed", label: "Unemployed" },
-  { value: "student", label: "Student" },
-  // Add other relevant options if needed
-];
-
-const educationLevelOptions = [
-  { value: "", label: "Select Level" }, // Represents null
-  { value: "high_school", label: "High School" },
-  { value: "bachelors", label: "Bachelor's Degree" },
-  { value: "masters", label: "Master's Degree" },
-  { value: "doctorate", label: "Doctorate" },
-  // Add other relevant options if needed
-];
-// --- End NEW Options ---
-
-// --- NEW: Helper to format demographic values ---
-const formatValue = (
-  value: string | number | boolean | null | undefined,
-): string => {
-  if (value === null || value === undefined || value === "") return "Not set";
-  if (typeof value === "boolean") return value ? "Yes" : "No"; // Format boolean for 'hasKids'
-  // Add specific formatting if needed (e.g., capitalize)
-  if (typeof value === "string") {
-    return value.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase()); // Capitalize words
-  }
-  return String(value);
-};
-
-// --- UPDATED: Demographic Info Display Component ---
-interface DemoInfoDisplayProps {
+// --- Mini Demographic Card Component (Keep existing) ---
+interface DemoInfoCardProps {
   icon: React.ElementType;
   label: string;
-  // Keep userProvidedValue for original fields
-  userProvidedValue: string | number | boolean | null | undefined;
-  inferredValue?: string | number | boolean | null | undefined; // Can be boolean for hasKids
-  isVerified?: boolean;
-  verificationFieldName?: keyof DemographicData; // e.g., 'genderIsVerified'
-  onVerify?: (fieldName: keyof DemographicData) => void;
-  onEdit?: () => void; // Function to open the edit form
+  value: string | number | null | undefined;
   isLoading?: boolean;
-  isMutating?: boolean; // To disable buttons during mutation
-  isEditingDemographics?: boolean;
 }
 
-const DemoInfoDisplay: React.FC<DemoInfoDisplayProps> = ({
+const DemoInfoCard: React.FC<DemoInfoCardProps> = ({
   icon: Icon,
   label,
-  userProvidedValue, // This now represents the USER's input for ALL fields
-  inferredValue,
-  isVerified,
-  verificationFieldName,
-  onVerify,
-  onEdit,
+  value,
   isLoading,
-  isMutating,
-  isEditingDemographics,
-}) => {
-  // Determine the primary value to display: User's input takes precedence
-  const primaryValue =
-    userProvidedValue !== null &&
-    userProvidedValue !== undefined &&
-    userProvidedValue !== ""
-      ? userProvidedValue
-      : inferredValue; // Fall back to inferred if user hasn't provided
-
-  const displayValue = formatValue(primaryValue);
-
-  // Determine if the displayed value is inferred and unverified
-  const isDisplayingInferredUnverified =
-    (userProvidedValue === null ||
-      userProvidedValue === undefined ||
-      userProvidedValue === "") && // User hasn't provided
-    inferredValue !== null &&
-    inferredValue !== undefined && // Inferred value exists
-    !isVerified; // And it's not verified
-
-  return (
-    <div className="flex items-start rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
-      <Icon className="mt-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-500 dark:text-gray-400" />
-      <div className="flex-grow">
-        <p className="text-sm font-medium text-gray-500 dark:text-gray-400">
-          {label}
-        </p>
-        <p className="text-lg font-semibold text-gray-900 dark:text-white">
-          {isLoading ? (
-            <Spinner size="sm" />
-          ) : (
-            <>
-              {displayValue}
-              {/* Show badge only if displaying an inferred value */}
-              {(userProvidedValue === null ||
-                userProvidedValue === undefined ||
-                userProvidedValue === "") &&
-                inferredValue !== null &&
-                inferredValue !== undefined && (
-                  <Tooltip
-                    content={
-                      isVerified ? "Confirmed by you" : "Inferred by Tapiro"
-                    }
-                  >
-                    <Badge
-                      color={isVerified ? "success" : "warning"}
-                      icon={isVerified ? HiCheckCircle : HiQuestionMarkCircle}
-                      className="ml-2 inline-flex"
-                    >
-                      {isVerified ? "Confirmed" : "Inferred"}
-                    </Badge>
-                  </Tooltip>
-                )}
-            </>
-          )}
+}) => (
+  <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
+    <Icon className="mr-3 h-6 w-6 flex-shrink-0 text-gray-500 dark:text-gray-400" />
+    <div className="flex-grow">
+      <p className="text-xs font-medium text-gray-500 dark:text-gray-400">
+        {label}
+      </p>
+      {isLoading ? (
+        <Spinner size="xs" />
+      ) : (
+        <p className="text-sm font-semibold text-gray-900 dark:text-white">
+          {value || "Not set"}
         </p>
-      </div>
-      {/* Action Buttons */}
-      {!isLoading && !isEditingDemographics && (
-        <div className="ml-auto flex flex-col space-y-1 pl-2">
-          {/* Show Verify button ONLY if displaying an inferred, unverified value */}
-          {isDisplayingInferredUnverified &&
-            verificationFieldName &&
-            onVerify && (
-              <Tooltip content="Confirm this inferred value is correct">
-                <Button
-                  color="success"
-                  size="xs"
-                  onClick={() => onVerify(verificationFieldName)}
-                  disabled={isMutating}
-                  className="w-full justify-center"
-                >
-                  {isMutating ? (
-                    <Spinner size="xs" className="mr-1" />
-                  ) : (
-                    <HiCheckCircle className="mr-1 h-4 w-4" />
-                  )}
-                  Confirm
-                </Button>
-              </Tooltip>
-            )}
-          {/* Edit button should always be available to add/change user-provided value */}
-          {onEdit && (
-            <Tooltip content="Edit your information">
-              <Button
-                color="light"
-                size="xs"
-                onClick={onEdit}
-                disabled={isMutating}
-                className="w-full justify-center"
-              >
-                <HiPencil className="mr-1 h-4 w-4" /> Edit
-              </Button>
-            </Tooltip>
-          )}
-        </div>
       )}
     </div>
-  );
-};
-// --- End Demographic Info Display Component ---
+  </div>
+);
+// --- End Mini Demographic Card Component ---
 
 const UserPreferencesPage: React.FC = () => {
   // --- Data Fetching (Keep existing) ---
   const {
-    data: userProfile, // This should now contain the full User object including demographicData
+    data: userProfile,
     isLoading: profileLoading,
     error: profileError,
-    refetch: refetchUserProfile, // Add refetch
   } = useUserProfile();
-  // ... (rest of data fetching) ...
   const {
     data: preferencesData,
     isLoading: preferencesLoading,
@@ -303,13 +139,12 @@ const UserPreferencesPage: React.FC = () => {
     error: taxonomyError,
   } = useTaxonomy();
 
-  // --- Mutations (Keep existing, ensure useUpdateUserProfile handles nested demographicData) ---
+  // --- Mutations (Keep existing) ---
   const {
     mutate: updateProfile,
     isPending: isUpdatingProfile,
     error: updateProfileError,
   } = useUpdateUserProfile();
-  // ... (rest of mutations) ...
   const {
     mutate: updatePreferences,
     isPending: isUpdatingPreferences,
@@ -318,22 +153,21 @@ const UserPreferencesPage: React.FC = () => {
 
   // --- State (Keep existing) ---
   const [isEditingDemographics, setIsEditingDemographics] = useState(false);
-  // ... (rest of state) ...
   const [showPreferenceModal, setShowPreferenceModal] = useState(false);
   const [editingPreferenceIndex, setEditingPreferenceIndex] = useState<
     number | null
   >(null);
 
-  // --- Forms (Keep existing, Demographics form only targets user-provided fields) ---
+  // --- Forms ---
   const {
+    register: registerDemo,
     handleSubmit: handleDemoSubmit,
     reset: resetDemoForm,
-    control: demoControl, // Use control for Controller
-    formState: { isDirty: isDemoDirty, errors: demoErrors }, // Add errors
-  } = useForm<DemographicsFormData>(); // Form data is only for user-provided fields
+    formState: { isDirty: isDemoDirty },
+  } = useForm<DemographicsFormData>();
 
-  // ... (Preference form remains the same) ...
   const {
+    register: registerPref,
     handleSubmit: handlePrefSubmit,
     reset: resetPrefForm,
     control: prefControl,
@@ -343,39 +177,18 @@ const UserPreferencesPage: React.FC = () => {
     defaultValues: { category: "", attributes: {}, score: 50 },
   });
 
-  // --- Effects (UPDATED demo form reset) ---
   useEffect(() => {
-    // Reset the demographics form when the profile data loads or editing stops
-    if (userProfile?.demographicData && !isEditingDemographics) {
+    if (userProfile && !isEditingDemographics) {
       resetDemoForm({
-        // Fields stored directly as user-provided in backend
-        gender: userProfile.demographicData.gender || null,
-        age: userProfile.demographicData.age || null,
-        country: userProfile.demographicData.country || null,
-        incomeBracket: userProfile.demographicData.incomeBracket || null,
-
-        // Fields currently ONLY inferred/verified in backend - initialize form to null
-        hasKids: null, // Or potentially pre-fill from inferred if desired, but form submits only the above 4
-        relationshipStatus: null,
-        employmentStatus: null,
-        educationLevel: null,
-      });
-    } else if (!isEditingDemographics) {
-      // If no profile data, reset all to null/defaults
-      resetDemoForm({
-        gender: null,
-        age: null,
-        country: null,
-        incomeBracket: null,
-        hasKids: null,
-        relationshipStatus: null,
-        employmentStatus: null,
-        educationLevel: null,
+        gender: userProfile?.demographicData?.gender || "",
+        age: userProfile?.demographicData?.age || undefined,
+        country: userProfile?.demographicData?.country || "",
+        incomeBracket: userProfile?.demographicData?.incomeBracket || "",
       });
     }
   }, [userProfile, isEditingDemographics, resetDemoForm]);
 
-  // ... (Preference form reset effect remains the same) ...
+  // Reset preference form when modal opens/closes or editing target changes
   useEffect(() => {
     if (showPreferenceModal) {
       if (
@@ -386,13 +199,14 @@ const UserPreferencesPage: React.FC = () => {
         const pref = preferencesData.preferences[editingPreferenceIndex];
         const formAttributes: Record<string, string | undefined> = {};
         if (pref.attributes) {
-          // Assuming pref.attributes is Record<string, Record<string, number>>
           Object.entries(pref.attributes).forEach(([key, valueObj]) => {
             let displayValue: string | undefined = undefined;
             if (typeof valueObj === "object" && valueObj !== null) {
+              // Attempt to get the first key if it's an object like { "Blue": 1.0 }
               const firstKey = Object.keys(valueObj)[0];
               if (firstKey) displayValue = firstKey;
             } else if (typeof valueObj === "string") {
+              // Handle simple string attributes if your API supports them
               displayValue = valueObj;
             }
             formAttributes[key] = displayValue;
@@ -403,8 +217,8 @@ const UserPreferencesPage: React.FC = () => {
           attributes: formAttributes,
           score:
             pref.score !== null && pref.score !== undefined
-              ? Math.round(pref.score * 100)
-              : 50,
+              ? Math.round(pref.score * 100) // Convert 0-1 score to 0-100 for slider
+              : 50, // Default slider value
         });
       } else {
         // Adding new preference
@@ -418,24 +232,23 @@ const UserPreferencesPage: React.FC = () => {
     resetPrefForm,
   ]);
 
-  // --- Memos (Keep existing) ---
+  // --- Memos ---
   const { categoryMap, attributeMap } = useMemo(() => {
-    // ... (implementation remains the same) ...
     const catMap = new Map<string, TaxonomyCategory>();
     const attrMap = new Map<string, Map<string, string>>(); // categoryId -> Map<attrName, attrDescription>
     if (taxonomyData?.categories) {
-      taxonomyData.categories.forEach((cat: TaxonomyCategory) => {
+      taxonomyData.categories.forEach((cat) => {
         catMap.set(cat.id, cat);
         const catAttrs = new Map<string, string>();
-        cat.attributes?.forEach((attr: TaxonomyAttribute) => {
+        cat.attributes?.forEach((attr) => {
           catAttrs.set(attr.name, attr.description || attr.name);
         });
         // Include parent attributes (simple one-level for now)
         if (cat.parent_id) {
           const parentCat = taxonomyData.categories.find(
-            (p: TaxonomyCategory) => p.id === cat.parent_id,
+            (p) => p.id === cat.parent_id,
           );
-          parentCat?.attributes?.forEach((attr: TaxonomyAttribute) => {
+          parentCat?.attributes?.forEach((attr) => {
             if (!catAttrs.has(attr.name)) {
               // Avoid overwriting child attributes
               catAttrs.set(attr.name, attr.description || attr.name);
@@ -454,63 +267,45 @@ const UserPreferencesPage: React.FC = () => {
   }, [selectedCategoryId, attributeMap]);
 
   // --- Handlers ---
-
-  // UPDATED: Demo Submit sends all user-provided fields
   const onDemoSubmit: SubmitHandler<DemographicsFormData> = (data) => {
-    const payload: UserUpdate = {
-      demographicData: {},
-    };
+    // Filter out empty strings or nulls before sending
+    const payload: Partial<UserUpdate> = {}; // Use UserUpdate for payload type
+    if (data.gender && data.gender !== "") payload.gender = data.gender;
+    else payload.gender = null; // Explicitly set to null if empty
+
+    if (data.age !== undefined && data.age !== null && !isNaN(data.age))
+      payload.age = Number(data.age);
+    else payload.age = null; // Explicitly set to null if empty/invalid
 
-    // Only include fields the backend schema accepts as user-provided
-    payload.demographicData!.gender = data.gender || null;
-    payload.demographicData!.age = data.age ? Number(data.age) : null;
-    payload.demographicData!.country = data.country || null;
-    payload.demographicData!.incomeBracket = data.incomeBracket || null;
+    if (data.country && data.country !== "") payload.country = data.country;
+    else payload.country = null; // Explicitly set to null if empty
 
-    // DO NOT send hasKids, relationshipStatus etc. directly here
-    // unless the backend schema (dbSchemas.js) and update logic (UserProfileService.js)
-    // are modified to accept and store them as user-provided values.
-    // Verification flags are handled by handleVerifyDemographic.
+    if (data.incomeBracket && data.incomeBracket !== "")
+      payload.incomeBracket = data.incomeBracket;
+    else payload.incomeBracket = null; // Explicitly set to null if empty
 
     // Only submit if there are actual changes
-    if (isDemoDirty) {
-      updateProfile(payload, {
-        onSuccess: () => {
-          setIsEditingDemographics(false); // Close form on success
-          refetchUserProfile(); // Refetch to show updated data
-        },
+    if (Object.keys(payload).length > 0) {
+      updateProfile(payload as UserUpdate, {
+        onSuccess: () => setIsEditingDemographics(false),
       });
     } else {
-      setIsEditingDemographics(false); // Close form if no changes were made
+      // No changes detected, just exit edit mode
+      setIsEditingDemographics(false);
     }
   };
 
-  // NEW: Handler for verifying inferred data
-  const handleVerifyDemographic = (fieldName: keyof DemographicData) => {
-    const payload: UserUpdate = {
-      demographicData: {
-        [fieldName]: true, // Set the specific verification flag to true
-      },
-    };
-    updateProfile(payload, {
-      onSuccess: () => {
-        refetchUserProfile(); // Refetch profile to show updated status
-      },
-      // Optional: Add onError handling
-    });
-  };
-
-  // --- Preference Handlers (Keep existing) ---
   const onPrefSubmit: SubmitHandler<PreferenceFormData> = (data) => {
-    // ... (implementation remains the same) ...
     const currentPreferences = preferencesData?.preferences || [];
     let updatedPreferences: PreferenceItem[];
 
+    // Format attributes for the API: { "brand": { "Apple": 1.0 }, "color": { "Blue": 1.0 } }
     const apiAttributes: Record<string, { [key: string]: number }> = {};
     if (data.attributes) {
       Object.entries(data.attributes).forEach(([key, value]) => {
         if (value && value.trim() !== "") {
-          apiAttributes[key] = { [value.trim()]: 1.0 };
+          // Only include non-empty attributes
+          apiAttributes[key] = { [value.trim()]: 1.0 }; // Assign score 1.0
         }
       });
     }
@@ -518,15 +313,16 @@ const UserPreferencesPage: React.FC = () => {
     const newPrefItem: PreferenceItem = {
       category: data.category,
       attributes: apiAttributes,
-      score: data.score / 100,
+      score: data.score / 100, // Convert 0-100 slider value to 0-1 score
     };
 
     if (editingPreferenceIndex !== null) {
-      updatedPreferences = currentPreferences.map(
-        (pref, index) =>
-          index === editingPreferenceIndex ? newPrefItem : pref, // pref type is PreferenceItem
+      // Update existing preference
+      updatedPreferences = currentPreferences.map((pref, index) =>
+        index === editingPreferenceIndex ? newPrefItem : pref,
       );
     } else {
+      // Add new preference
       updatedPreferences = [...currentPreferences, newPrefItem];
     }
 
@@ -542,22 +338,19 @@ const UserPreferencesPage: React.FC = () => {
   };
 
   const handleRemovePreference = (indexToRemove: number) => {
-    // ... (implementation remains the same) ...
     const currentPreferences = preferencesData?.preferences || [];
     const updatedPreferences = currentPreferences.filter(
-      (_: PreferenceItem, index: number) => index !== indexToRemove,
+      (_, index) => index !== indexToRemove,
     );
     updatePreferences({ preferences: updatedPreferences });
   };
 
   const openAddModal = () => {
-    // ... (implementation remains the same) ...
     setEditingPreferenceIndex(null);
     setShowPreferenceModal(true);
   };
 
   const openEditModal = (index: number) => {
-    // ... (implementation remains the same) ...
     setEditingPreferenceIndex(index);
     setShowPreferenceModal(true);
   };
@@ -565,10 +358,9 @@ const UserPreferencesPage: React.FC = () => {
   // --- Render Logic ---
   const isLoading = profileLoading || preferencesLoading || taxonomyLoading;
   const error = profileError || preferencesError || taxonomyError;
-  const isMutating = isUpdatingProfile || isUpdatingPreferences; // Combined mutation state
+  const isMutating = isUpdatingProfile || isUpdatingPreferences;
 
-  if (isLoading && !userProfile) {
-    // Show loading only if profile isn't loaded yet
+  if (isLoading) {
     return <LoadingSpinner message="Loading preferences..." />;
   }
 
@@ -582,9 +374,6 @@ const UserPreferencesPage: React.FC = () => {
     );
   }
 
-  // Get demographic data safely
-  const demographics = userProfile?.demographicData;
-
   return (
     <div className="container mx-auto px-4 py-12">
       <h2 className="mb-8 text-3xl font-bold text-gray-900 dark:text-white">
@@ -592,14 +381,23 @@ const UserPreferencesPage: React.FC = () => {
       </h2>
 
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* --- Demographics Section (UPDATED) --- */}
+        {/* --- Demographics Section (Left Column on Large Screens) --- */}
         <Card className="lg:col-span-1">
           <div className="flex items-center justify-between">
             <h3 className="flex items-center text-xl font-semibold text-gray-900 dark:text-white">
               <HiUser className="mr-2 h-5 w-5" />
               About You
             </h3>
-            {/* Edit button is now handled within DemoInfoDisplay */}
+            {!isEditingDemographics && (
+              <Button
+                color="light"
+                size="sm"
+                onClick={() => setIsEditingDemographics(true)}
+                disabled={isMutating}
+              >
+                <HiPencil className="mr-1 h-4 w-4" /> Edit
+              </Button>
+            )}
           </div>
           {updateProfileError && (
             <Alert color="failure" icon={HiInformationCircle} className="mt-4">
@@ -607,238 +405,92 @@ const UserPreferencesPage: React.FC = () => {
             </Alert>
           )}
           {isEditingDemographics ? (
-            // --- EDIT FORM (Only User-Provided Fields) ---
             <form
               onSubmit={handleDemoSubmit(onDemoSubmit)}
-              className="mt-4 space-y-4"
+              className="mt-4 space-y-4" // Use space-y for consistent spacing
             >
-              {/* Gender */}
+              {/* --- Gender Select --- */}
               <div>
                 <Label htmlFor="gender">Gender</Label>
-                <Controller
-                  name="gender"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <Select
-                      id="gender"
-                      {...field}
-                      value={field.value ?? ""} // Handle null/undefined
-                      className="mt-1"
-                    >
-                      {genderOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
+                <Select
+                  id="gender"
+                  {...registerDemo("gender")} // Register the select
+                  className="mt-1"
+                  defaultValue={userProfile?.demographicData?.gender || ""} // Set default value for reset
+                >
+                  {genderOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
               </div>
-              {/* Age */}
               <div>
                 <Label htmlFor="age">Age</Label>
-                <Controller
-                  name="age"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <TextInput
-                      id="age"
-                      type="number"
-                      placeholder="e.g., 30"
-                      min="0"
-                      {...field}
-                      value={field.value ?? ""} // Handle null/undefined for input value
-                      onChange={(e) =>
-                        field.onChange(
-                          e.target.value === ""
-                            ? null
-                            : parseInt(e.target.value, 10),
-                        )
-                      } // Convert back to number or null
-                      className="mt-1"
-                    />
-                  )}
+                <TextInput
+                  id="age"
+                  type="number"
+                  {...registerDemo("age", { valueAsNumber: true })}
+                  placeholder="e.g., 30"
+                  min="0" // Add min value
+                  className="mt-1"
                 />
-                {demoErrors.age && (
-                  <p className="mt-1 text-sm text-red-600">
-                    {demoErrors.age.message}
-                  </p>
-                )}
               </div>
-              {/* Country */}
               <div>
                 <Label htmlFor="country">Country</Label>
-                <Controller
-                  name="country"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <Select
-                      id="country"
-                      {...field}
-                      value={field.value ?? ""} // Handle null/undefined
-                      className="mt-1"
-                    >
-                      {countryOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
+                <Select
+                  id="country"
+                  {...registerDemo("country")} // Register the select
+                  className="mt-1"
+                  defaultValue={userProfile?.demographicData?.country || ""} // Set default value
+                >
+                  {countryOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
               </div>
-              {/* Income Bracket */}
+              {/* --- Income Bracket Select --- */}
               <div>
                 <Label htmlFor="incomeBracket">Income Bracket</Label>
-                <Controller
-                  name="incomeBracket"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <Select
-                      id="incomeBracket"
-                      {...field}
-                      value={field.value ?? ""} // Handle null/undefined
-                      className="mt-1"
-                    >
-                      {incomeOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
-              </div>
-
-              {/* --- NEW Form Fields for Previously Inferred Data --- */}
-
-              {/* Has Kids */}
-              <div>
-                <Label htmlFor="hasKids">Do you have kids?</Label>
-                <Controller
-                  name="hasKids"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <Select
-                      id="hasKids"
-                      {...field}
-                      // Convert boolean/null to string for select value
-                      value={
-                        field.value === true
-                          ? "true"
-                          : field.value === false
-                            ? "false"
-                            : ""
-                      }
-                      onChange={(e) => {
-                        // Convert string back to boolean or null
-                        const value = e.target.value;
-                        field.onChange(
-                          value === "true"
-                            ? true
-                            : value === "false"
-                              ? false
-                              : null,
-                        );
-                      }}
-                      className="mt-1"
-                    >
-                      {hasKidsOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
-              </div>
-
-              {/* Relationship Status */}
-              <div>
-                <Label htmlFor="relationshipStatus">Relationship Status</Label>
-                <Controller
-                  name="relationshipStatus"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <Select
-                      id="relationshipStatus"
-                      {...field}
-                      value={field.value ?? ""}
-                      className="mt-1"
-                    >
-                      {relationshipStatusOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
-              </div>
-
-              {/* Employment Status */}
-              <div>
-                <Label htmlFor="employmentStatus">Employment Status</Label>
-                <Controller
-                  name="employmentStatus"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <Select
-                      id="employmentStatus"
-                      {...field}
-                      value={field.value ?? ""}
-                      className="mt-1"
-                    >
-                      {employmentStatusOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
-              </div>
-
-              {/* Education Level */}
-              <div>
-                <Label htmlFor="educationLevel">Education Level</Label>
-                <Controller
-                  name="educationLevel"
-                  control={demoControl}
-                  render={({ field }) => (
-                    <Select
-                      id="educationLevel"
-                      {...field}
-                      value={field.value ?? ""}
-                      className="mt-1"
-                    >
-                      {educationLevelOptions.map((option) => (
-                        <option key={option.value} value={option.value}>
-                          {option.label}
-                        </option>
-                      ))}
-                    </Select>
-                  )}
-                />
+                <Select
+                  id="incomeBracket"
+                  {...registerDemo("incomeBracket")} // Register the select
+                  className="mt-1"
+                  defaultValue={
+                    userProfile?.demographicData?.incomeBracket || ""
+                  } // Set default value for reset
+                >
+                  {incomeOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
               </div>
-              {/* --- End NEW Form Fields --- */}
-
-              {/* Form Actions */}
-              <div className="flex justify-end space-x-3 pt-2">
+              <div className="mt-6 flex justify-end gap-3">
                 <Button
                   color="gray"
-                  onClick={() => setIsEditingDemographics(false)}
+                  onClick={() => {
+                    setIsEditingDemographics(false);
+                    // Reset form to original values on cancel
+                    resetDemoForm({
+                      gender: userProfile?.demographicData?.gender || "",
+                      age: userProfile?.demographicData?.age || undefined,
+                      country: userProfile?.demographicData?.country || "",
+                      incomeBracket:
+                        userProfile?.demographicData?.incomeBracket || "",
+                    });
+                  }}
                   disabled={isMutating}
                 >
                   Cancel
                 </Button>
-                <Button
-                  type="submit"
-                  disabled={isMutating || !isDemoDirty} // Disable if mutating or no changes
-                >
+                <Button type="submit" disabled={isMutating || !isDemoDirty}>
                   {isUpdatingProfile ? (
                     <>
-                      <Spinner size="sm" className="mr-3" /> Saving...
+                      <Spinner size="sm" className="mr-2" /> Saving...
                     </>
                   ) : (
                     "Save Changes"
@@ -847,128 +499,45 @@ const UserPreferencesPage: React.FC = () => {
               </div>
             </form>
           ) : (
-            // --- DISPLAY VIEW (User-Provided + Inferred) ---
-            <div className="mt-4 space-y-3">
-              {/* Gender */}
-              <DemoInfoDisplay
-                icon={HiOutlineIdentification}
+            // --- DISPLAY VIEW ---
+            <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <DemoInfoCard
+                icon={HiOutlineUserCircle}
                 label="Gender"
-                userProvidedValue={demographics?.gender} // Correct
-                inferredValue={demographics?.inferredGender}
-                isVerified={demographics?.genderIsVerified}
-                verificationFieldName="genderIsVerified"
-                onVerify={handleVerifyDemographic}
-                onEdit={() => setIsEditingDemographics(true)}
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
+                value={userProfile?.demographicData?.gender}
+                isLoading={profileLoading}
               />
-              {/* Age */}
-              <DemoInfoDisplay
-                icon={HiOutlineCalendar}
+              <DemoInfoCard
+                icon={HiOutlineCake}
                 label="Age"
-                userProvidedValue={demographics?.age} // Correct
-                inferredValue={demographics?.inferredAgeBracket} // Still show inferred bracket if age not set
-                isVerified={demographics?.ageBracketIsVerified} // Verification applies to bracket
-                verificationFieldName="ageBracketIsVerified"
-                onVerify={handleVerifyDemographic}
-                onEdit={() => setIsEditingDemographics(true)}
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
+                value={userProfile?.demographicData?.age}
+                isLoading={profileLoading}
               />
-              {/* Country */}
-              <DemoInfoDisplay
+              <DemoInfoCard
                 icon={HiOutlineGlobeAlt}
                 label="Country"
-                userProvidedValue={demographics?.country} // Correct
-                // No inferred value for country
-                onEdit={() => setIsEditingDemographics(true)}
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
-              />
-              {/* Income */}
-              <DemoInfoDisplay
-                icon={HiOutlineCurrencyDollar}
-                label="Income Bracket"
-                userProvidedValue={demographics?.incomeBracket} // Correct
-                // No inferred value for income
-                onEdit={() => setIsEditingDemographics(true)}
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
-              />
-              {/* Has Kids */}
-              <DemoInfoDisplay
-                icon={HiOutlineUserGroup}
-                label="Has Kids"
-                userProvidedValue={null} // No direct user-provided field in current backend schema
-                inferredValue={demographics?.inferredHasKids}
-                isVerified={demographics?.hasKidsIsVerified}
-                verificationFieldName="hasKidsIsVerified"
-                onVerify={handleVerifyDemographic}
-                onEdit={() => setIsEditingDemographics(true)} // Allow editing (form collects input, but submit might ignore it)
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
-              />
-              {/* Relationship Status */}
-              <DemoInfoDisplay
-                icon={HiOutlineUsers}
-                label="Relationship Status"
-                userProvidedValue={null} // No direct user-provided field
-                inferredValue={demographics?.inferredRelationshipStatus}
-                isVerified={demographics?.relationshipStatusIsVerified}
-                verificationFieldName="relationshipStatusIsVerified"
-                onVerify={handleVerifyDemographic}
-                onEdit={() => setIsEditingDemographics(true)} // Allow editing
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
+                value={userProfile?.demographicData?.country}
+                isLoading={profileLoading}
               />
-              {/* Employment Status */}
-              <DemoInfoDisplay
-                icon={HiOutlineBriefcase}
-                label="Employment Status"
-                userProvidedValue={null} // No direct user-provided field
-                inferredValue={demographics?.inferredEmploymentStatus}
-                isVerified={demographics?.employmentStatusIsVerified}
-                verificationFieldName="employmentStatusIsVerified"
-                onVerify={handleVerifyDemographic}
-                onEdit={() => setIsEditingDemographics(true)} // Allow editing
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
-              />
-              {/* Education Level */}
-              <DemoInfoDisplay
-                icon={HiOutlineAcademicCap}
-                label="Education Level"
-                userProvidedValue={null} // No direct user-provided field
-                inferredValue={demographics?.inferredEducationLevel}
-                isVerified={demographics?.educationLevelIsVerified}
-                verificationFieldName="educationLevelIsVerified"
-                onVerify={handleVerifyDemographic}
-                onEdit={() => setIsEditingDemographics(true)} // Allow editing
-                isLoading={profileLoading && !demographics}
-                isMutating={isUpdatingProfile}
-                isEditingDemographics={isEditingDemographics}
+              <DemoInfoCard
+                icon={HiOutlineCash}
+                label="Income"
+                value={userProfile?.demographicData?.incomeBracket}
+                isLoading={profileLoading}
               />
             </div>
           )}
         </Card>
 
-        {/* --- Preferences Section (Right Columns on Large Screens) --- */}
+        {/* --- Preferences Section (Right Column on Large Screens) --- */}
         <Card className="lg:col-span-2">
-          {/* ... (Preference list and modal rendering remains the same) ... */}
           <div className="flex items-center justify-between">
             <h3 className="flex items-center text-xl font-semibold text-gray-900 dark:text-white">
-              <HiOutlineHeart className="mr-2 h-5 w-5" /> {/* Example Icon */}
+              <HiSparkles className="mr-2 h-5 w-5" />
               Your Interests
             </h3>
             <Button
-              color="success"
+              color="blue"
               size="sm"
               onClick={openAddModal}
               disabled={isMutating}
@@ -981,218 +550,222 @@ const UserPreferencesPage: React.FC = () => {
               Failed to update preferences: {updatePreferencesError.message}
             </Alert>
           )}
-          {preferencesLoading ? (
-            <div className="flex justify-center py-6">
-              <Spinner size="md" />
+          {isUpdatingPreferences && !showPreferenceModal && (
+            <div className="my-4 flex items-center justify-center text-sm text-gray-500 dark:text-gray-400">
+              <Spinner size="sm" /> <span className="ml-2">Saving...</span>
             </div>
-          ) : preferencesData?.preferences &&
+          )}
+          <div className="mt-4">
+            {preferencesData?.preferences &&
             preferencesData.preferences.length > 0 ? (
-            <List
-              unstyled
-              className="mt-4 divide-y divide-gray-200 dark:divide-gray-700"
-            >
-              {preferencesData.preferences.map((pref, index) => (
-                <ListItem key={index} className="py-3 sm:py-4">
-                  {" "}
-                  {/* pref type is PreferenceItem */}
-                  <div className="flex items-center space-x-4">
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
-                        {categoryMap.get(pref.category)?.name || pref.category}
-                      </p>
-                      {/* Check if attributes is a non-null object before processing */}
-                      {pref.attributes &&
-                        typeof pref.attributes === "object" &&
-                        Object.keys(pref.attributes).length > 0 && (
-                          <p className="truncate text-sm text-gray-500 dark:text-gray-400">
-                            {Object.entries(pref.attributes)
-                              .map(([key, valueObj]) => {
-                                // Ensure valueObj is also an object before getting keys
-                                if (
-                                  typeof valueObj === "object" &&
-                                  valueObj !== null
-                                ) {
-                                  const value = Object.keys(valueObj)[0]; // Get the first key (value)
-                                  return `${key}: ${value}`;
-                                }
-                                return `${key}: N/A`; // Fallback if valueObj is not as expected
-                              })
-                              .join(", ")}
-                          </p>
+              <List unstyled className="space-y-3">
+                {preferencesData.preferences.map((pref, index) => {
+                  // Extract attribute display logic
+                  const attributesDisplay =
+                    pref.attributes &&
+                    Object.entries(pref.attributes).map(([key, valueObj]) => {
+                      let displayValue = "[Complex Value]";
+                      if (typeof valueObj === "object" && valueObj !== null) {
+                        const firstKey = Object.keys(valueObj)[0];
+                        if (firstKey) displayValue = firstKey;
+                      } else if (typeof valueObj === "string") {
+                        displayValue = valueObj;
+                      }
+                      return { key, displayValue };
+                    });
+
+                  return (
+                    <ListItem
+                      key={index}
+                      className="flex flex-col items-start rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
+                    >
+                      <div className="mb-3 flex-grow sm:mb-0">
+                        <span className="block text-base font-semibold text-gray-800 dark:text-gray-200">
+                          {categoryMap.get(pref.category || "")?.name ||
+                            "Unknown Category"}
+                        </span>
+                        <span className="block text-sm text-gray-600 dark:text-gray-400">
+                          Score:{" "}
+                          {pref.score !== null && pref.score !== undefined
+                            ? Math.round(pref.score * 100)
+                            : "N/A"}
+                        </span>
+                        {attributesDisplay && attributesDisplay.length > 0 && (
+                          <div className="mt-1 text-xs">
+                            {attributesDisplay.map(({ key, displayValue }) => (
+                              <span
+                                key={key}
+                                className="mt-1 mr-1.5 inline-block rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-600 dark:text-gray-200"
+                              >
+                                <span className="font-medium">
+                                  {attributeMap
+                                    .get(pref.category || "")
+                                    ?.get(key) || key}
+                                  :
+                                </span>{" "}
+                                {displayValue}
+                              </span>
+                            ))}
+                          </div>
                         )}
-                    </div>
-                    <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
-                      {/* Display score as percentage */}
-                      {pref.score !== null && pref.score !== undefined
-                        ? `${Math.round(pref.score * 100)}%`
-                        : "N/A"}
-                    </div>
-                    <div className="flex space-x-2">
-                      <Tooltip content="Edit this interest">
+                      </div>
+                      <div className="flex flex-shrink-0 gap-2 self-end sm:self-center">
                         <Button
-                          color="light"
                           size="xs"
+                          color="light"
                           onClick={() => openEditModal(index)}
                           disabled={isMutating}
+                          aria-label="Edit interest"
                         >
-                          <HiPencil className="h-4 w-4" />
+                          <HiPencil />
                         </Button>
-                      </Tooltip>
-                      <Tooltip content="Remove this interest">
                         <Button
-                          color="failure"
                           size="xs"
+                          color="failure"
+                          outline
                           onClick={() => handleRemovePreference(index)}
                           disabled={isMutating}
+                          aria-label="Delete interest"
                         >
-                          <HiTrash className="h-4 w-4" /> {/* Example Icon */}
+                          <HiTrash />
                         </Button>
-                      </Tooltip>
-                    </div>
-                  </div>
-                </ListItem>
-              ))}
-            </List>
-          ) : (
-            <p className="mt-4 text-center text-gray-500 dark:text-gray-400">
-              You haven't added any specific interests yet. Add some to help
-              personalize your experience!
-            </p>
-          )}
+                      </div>
+                    </ListItem>
+                  );
+                })}
+              </List>
+            ) : (
+              <p className="text-center text-gray-500 dark:text-gray-400">
+                You haven't added any specific interests yet. Click "Add
+                Interest" to get started.
+              </p>
+            )}
+          </div>
         </Card>
       </div>
 
-      {/* --- Preference Edit/Add Modal --- */}
+      {/* --- Preference Add/Edit Modal --- */}
       <Modal
         show={showPreferenceModal}
-        onClose={() => setShowPreferenceModal(false)}
+        onClose={() => !isMutating && setShowPreferenceModal(false)}
+        size="lg" // Slightly larger modal
       >
         <ModalHeader>
-          {editingPreferenceIndex !== null ? "Edit Interest" : "Add Interest"}
+          {editingPreferenceIndex !== null
+            ? "Edit Interest"
+            : "Add New Interest"}
         </ModalHeader>
-        <ModalBody>
-          <form
-            id="preference-form"
-            onSubmit={handlePrefSubmit(onPrefSubmit)}
-            className="space-y-4"
-          >
+        <form onSubmit={handlePrefSubmit(onPrefSubmit)}>
+          <ModalBody className="space-y-6">
             {/* Category Select */}
             <div>
-              <Label htmlFor="category">Category *</Label>
-              <Controller
-                name="category"
-                control={prefControl}
-                rules={{ required: "Category is required" }}
-                render={({ field }) => (
-                  <Select id="category" {...field} className="mt-1">
-                    <option value="">Select a Category</option>
-                    {taxonomyData?.categories
-                      ?.sort((a: TaxonomyCategory, b: TaxonomyCategory) =>
-                        a.name.localeCompare(b.name),
-                      ) // Sort categories alphabetically
-                      .map(
-                        (
-                          cat: TaxonomyCategory, // cat type is TaxonomyCategory
-                        ) => (
-                          <option key={cat.id} value={cat.id}>
-                            {cat.name}
-                          </option>
-                        ),
-                      )}
-                  </Select>
-                )}
-              />
+              <Label htmlFor="category">Interest Category</Label>
+              <Select
+                id="category"
+                {...registerPref("category", {
+                  required: "Category is required",
+                })}
+                color={prefErrors.category ? "failure" : "gray"}
+                disabled={editingPreferenceIndex !== null} // Disable category change when editing
+                required
+              >
+                <option value="" disabled>
+                  Select a category...
+                </option>
+                {Array.from(categoryMap.values())
+                  .filter((cat) => cat.id) // Ensure category has an ID
+                  .sort((a, b) => a.name.localeCompare(b.name))
+                  .map((cat) => (
+                    <option key={cat.id} value={cat.id}>
+                      {cat.name}
+                    </option>
+                  ))}
+              </Select>
               {prefErrors.category && (
-                <p className="mt-1 text-sm text-red-600">
+                <p className="mt-1 text-xs text-red-600 dark:text-red-400">
                   {prefErrors.category.message}
                 </p>
               )}
             </div>
 
-            {/* Dynamic Attributes */}
+            {/* Attributes */}
             {selectedCategoryId && availableAttributes.size > 0 && (
-              <Card>
-                {" "}
-                {/* Wrap attributes in a card for better visual grouping */}
-                <h4 className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Refine by Attributes (Optional)
-                </h4>
-                <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+              <fieldset className="rounded border p-4 dark:border-gray-600">
+                <legend className="-ml-1 px-1 text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Refine Interest (Optional)
+                </legend>
+                <div className="grid grid-cols-1 gap-4 pt-3 sm:grid-cols-2">
                   {Array.from(availableAttributes.entries()).map(
                     ([attrName, attrDesc]) => (
                       <div key={attrName}>
-                        <Label htmlFor={`attr-${attrName}`} className="text-xs">
+                        <Label
+                          htmlFor={`attr-${attrName}`}
+                          className="mb-1 text-xs"
+                        >
                           {attrDesc || attrName}
                         </Label>
-                        <Controller
-                          name={`attributes.${attrName}`}
-                          control={prefControl}
-                          render={({ field }) => (
-                            <TextInput
-                              id={`attr-${attrName}`}
-                              placeholder={`e.g., Blue, Large, Apple`} // Provide example
-                              {...field}
-                              value={field.value || ""} // Ensure controlled component
-                              className="mt-1"
-                            />
-                          )}
+                        <TextInput
+                          id={`attr-${attrName}`}
+                          {...registerPref(`attributes.${attrName}`)}
+                          placeholder={`e.g., ${attrName === "color" ? "Blue" : attrName === "brand" ? "Acme" : "Any"}`}
+                          className="text-sm"
                         />
                       </div>
                     ),
                   )}
                 </div>
-              </Card>
+              </fieldset>
             )}
 
             {/* Score Slider */}
             <div>
-              <Label htmlFor="score">{`Interest Score: ${watchPref("score")}%`}</Label>
+              <Label htmlFor="score">Interest Score (0-100)</Label>
               <Controller
                 name="score"
                 control={prefControl}
-                render={({ field }) => (
-                  <RangeSlider
-                    id="score"
-                    min={0}
-                    max={100}
-                    step={5}
-                    {...field}
-                    className="mt-1"
-                  />
+                render={({ field: { onChange, value } }) => (
+                  <div className="mt-1 flex items-center gap-4">
+                    <RangeSlider
+                      id="score"
+                      min={0}
+                      max={100}
+                      value={value ?? 50}
+                      onChange={(e) => onChange(parseInt(e.target.value, 10))}
+                      className="flex-grow"
+                    />
+                    <span className="w-10 text-right text-sm font-medium text-gray-900 dark:text-white">
+                      {value ?? 50}
+                    </span>
+                  </div>
                 )}
               />
+              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                How interested are you in this category? (0 = Not at all, 100 =
+                Very interested)
+              </p>
             </div>
-          </form>
-          {updatePreferencesError && (
-            <Alert color="failure" icon={HiInformationCircle} className="mt-2">
-              Failed to save interest: {updatePreferencesError.message}
-            </Alert>
-          )}
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            color="gray"
-            onClick={() => setShowPreferenceModal(false)}
-            disabled={isUpdatingPreferences}
-          >
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            form="preference-form" // Link button to the form
-            disabled={isUpdatingPreferences}
-          >
-            {isUpdatingPreferences ? (
-              <>
-                <Spinner size="sm" className="mr-3" /> Saving...
-              </>
-            ) : editingPreferenceIndex !== null ? (
-              "Save Changes"
-            ) : (
-              "Add Interest"
-            )}
-          </Button>
-        </ModalFooter>
+          </ModalBody>
+          <ModalFooter className="justify-end">
+            <Button
+              color="gray"
+              onClick={() => setShowPreferenceModal(false)}
+              disabled={isMutating}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isMutating}>
+              {isUpdatingPreferences ? (
+                <>
+                  <Spinner size="sm" className="mr-2" /> Saving...
+                </>
+              ) : editingPreferenceIndex !== null ? (
+                "Save Changes"
+              ) : (
+                "Add Interest"
+              )}
+            </Button>
+          </ModalFooter>
+        </form>
       </Modal>
     </div>
   );

From 0b6e0a441f40e64e7da5cab3c8729c60d2491a60 Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 03:21:54 +0530
Subject: [PATCH 11/21] feat: Enhance demographic data handling by adding
 user-provided fields and removing verification flags

---
 api-service/api/openapi.yaml                  | 150 ++++++++-------
 api-service/service/AuthenticationService.js  |  22 ++-
 api-service/service/UserProfileService.js     |  67 +++----
 api-service/utils/dbSchemas.js                |  80 ++++----
 .../app/services/demographicInference.py      | 173 +++++++-----------
 web/src/api/types/data-contracts.ts           | 128 +++++++------
 6 files changed, 288 insertions(+), 332 deletions(-)

diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index 8311ba6..d1e9b61 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -1038,6 +1038,7 @@ components:
         phone:
           type: string
           description: User's phone number (E.164 format recommended)
+          pattern: '^\+?[\d\s-]+$'
         preferences:
           type: array
           description: User interest preferences with taxonomy categorization
@@ -1050,21 +1051,11 @@ components:
               type: boolean
             anonymizeData:
               type: boolean
-            optInStores:
-              type: array
-              items:
-                type: string
-                description: List of store IDs the user has opted into sharing data with
-            optOutStores:
-              type: array
-              items:
-                type: string
-                description: List of store IDs the user has opted out of sharing data with
+            # optInStores/optOutStores are handled by separate endpoints
         demographicData:
           type: object
-          description: Updatable demographic information (user-provided and verification flags).
+          description: Updatable user-provided demographic information. Setting a value here implies verification and may clear inferred values.
           properties:
-            # User-provided fields
             gender:
               type: string
               nullable: true
@@ -1092,26 +1083,36 @@ components:
               type: integer
               format: int32
               nullable: true
-              description: "User-provided age. Setting this clears inferredAgeBracket."
-            # Verification flags for inferred fields
-            hasKidsIsVerified:
-              type: boolean
-              description: "Set to true by the user to confirm the inferred 'hasKids' status."
-            relationshipStatusIsVerified:
-              type: boolean
-              description: "Set to true by the user to confirm the inferred 'relationshipStatus'."
-            employmentStatusIsVerified:
-              type: boolean
-              description: "Set to true by the user to confirm the inferred 'employmentStatus'."
-            educationLevelIsVerified:
-              type: boolean
-              description: "Set to true by the user to confirm the inferred 'educationLevel'."
-            ageBracketIsVerified:
-              type: boolean
-              description: "Set to true by the user to confirm the inferred 'ageBracket'. Only applicable if 'age' is not set."
-            genderIsVerified:
+              description: "User-provided age. Setting this clears the inferred age bracket."
+              minimum: 0
+            hasKids:
               type: boolean
-              description: "Set to true by the user to confirm the inferred 'gender'. Only applicable if 'gender' is not set."
+              nullable: true
+              description: "User-provided: Does the user have children?"
+            relationshipStatus:
+              type: string
+              nullable: true
+              description: "User-provided: User relationship status"
+              enum: [single, relationship, married, prefer_not_to_say, null]
+            employmentStatus:
+              type: string
+              nullable: true
+              description: "User-provided: User employment status"
+              enum: [employed, unemployed, student, prefer_not_to_say, null]
+            educationLevel:
+              type: string
+              nullable: true
+              description: "User-provided: User education level"
+              enum:
+                [
+                  high_school,
+                  bachelors,
+                  masters,
+                  doctorate,
+                  prefer_not_to_say,
+                  null,
+                ]
+            # REMOVED verification flags from update payload
 
     ApiKey:
       type: object
@@ -1595,7 +1596,7 @@ components:
         gender:
           type: string
           nullable: true
-          description: "User-provided gender identity" # Keep as user-provided
+          description: "User-provided gender identity"
           enum: [male, female, non-binary, prefer_not_to_say, null]
           example: "female"
         incomeBracket:
@@ -1622,62 +1623,71 @@ components:
           type: integer
           format: int32
           nullable: true
-          description: "User-provided age" # Keep as user-provided
+          description: "User-provided age"
           example: 35
-        # --- Inferred fields ---
-        inferredHasKids:
+          minimum: 0
+        hasKids: # NEW User-provided
           type: boolean
           nullable: true
-          description: "Inferred: Does the user likely have children? (null if unknown)"
-        hasKidsIsVerified: # NEW
+          description: "User-provided: Does the user have children?"
+          example: true
+        relationshipStatus: # NEW User-provided
+          type: string
+          nullable: true
+          description: "User-provided: User relationship status"
+          enum: [single, relationship, married, prefer_not_to_say, null]
+          example: "married"
+        employmentStatus: # NEW User-provided
+          type: string
+          nullable: true
+          description: "User-provided: User employment status"
+          enum: [employed, unemployed, student, prefer_not_to_say, null]
+          example: "employed"
+        educationLevel: # NEW User-provided
+          type: string
+          nullable: true
+          description: "User-provided: User education level"
+          enum:
+            [
+              high_school,
+              bachelors,
+              masters,
+              doctorate,
+              prefer_not_to_say,
+              null,
+            ]
+          example: "bachelors"
+        # --- Inferred (Read-Only in responses, not updatable directly) ---
+        inferredHasKids:
           type: boolean
-          description: "Flag indicating if inferredHasKids has been verified by the user"
-          default: false
+          nullable: true
+          readOnly: true
+          description: "Inferred: Does the user likely have children? (null if unknown or user provided)"
         inferredRelationshipStatus:
           type: string
           nullable: true
-          description: "Inferred: User relationship status (null if unknown)"
+          readOnly: true
+          description: "Inferred: User relationship status (null if unknown or user provided)"
           enum: [single, relationship, married, null]
-        relationshipStatusIsVerified: # NEW
-          type: boolean
-          description: "Flag indicating if inferredRelationshipStatus has been verified by the user"
-          default: false
         inferredEmploymentStatus:
           type: string
           nullable: true
-          description: "Inferred: User employment status (null if unknown)"
+          readOnly: true
+          description: "Inferred: User employment status (null if unknown or user provided)"
           enum: [employed, unemployed, student, null]
-        employmentStatusIsVerified: # NEW
-          type: boolean
-          description: "Flag indicating if inferredEmploymentStatus has been verified by the user"
-          default: false
         inferredEducationLevel:
           type: string
           nullable: true
-          description: "Inferred: User education level (null if unknown)"
+          readOnly: true
+          description: "Inferred: User education level (null if unknown or user provided)"
           enum: [high_school, bachelors, masters, doctorate, null]
-        educationLevelIsVerified: # NEW
-          type: boolean
-          description: "Flag indicating if inferredEducationLevel has been verified by the user"
-          default: false
-        inferredAgeBracket: # NEW (separate from user-provided 'age')
+        inferredGender:
           type: string
           nullable: true
-          description: "Inferred: User age bracket (null if unknown or age provided)"
-          enum: ["18-24", "25-34", "35-44", "45-54", "55-64", "65+", null]
-        ageBracketIsVerified: # NEW
-          type: boolean
-          description: "Flag indicating if inferredAgeBracket has been verified by the user"
-          default: false
-        inferredGender: # NEW (separate from user-provided 'gender')
-          type: string
-          nullable: true
-          description: "Inferred: User gender identity (null if unknown or gender provided)"
-          enum: [male, female, non-binary, null] # Note: 'prefer_not_to_say' is user-only
-        genderIsVerified: # NEW
-          type: boolean
-          description: "Flag indicating if inferredGender has been verified by the user"
-          default: false
+          readOnly: true
+          description: "Inferred: User gender identity (null if unknown or user provided)"
+          enum: [male, female, non-binary, null]
+
     RecentUserDataEntry:
       type: object
       properties:
diff --git a/api-service/service/AuthenticationService.js b/api-service/service/AuthenticationService.js
index e271f6e..e13680f 100644
--- a/api-service/service/AuthenticationService.js
+++ b/api-service/service/AuthenticationService.js
@@ -101,24 +101,28 @@ exports.registerUser = async function (req, body) {
       email: userData.email,
       phone: userData.phone_number || null,
       demographicData: {
-        // User provided
+        // User provided (initialize as null unless provided in registration body)
         gender: gender || null,
         incomeBracket: incomeBracket || null,
         country: country || null,
         age: age || null,
-        // Inferred (initialize as null, verified as false)
+        hasKids: null, // NEW user-provided, init null
+        relationshipStatus: null, // NEW user-provided, init null
+        employmentStatus: null, // NEW user-provided, init null
+        educationLevel: null, // NEW user-provided, init null
+        // Inferred (initialize as null)
         inferredHasKids: null,
-        hasKidsIsVerified: false, // Initialize
+        // REMOVED hasKidsIsVerified
         inferredRelationshipStatus: null,
-        relationshipStatusIsVerified: false, // Initialize
+        // REMOVED relationshipStatusIsVerified
         inferredEmploymentStatus: null,
-        employmentStatusIsVerified: false, // Initialize
+        // REMOVED employmentStatusIsVerified
         inferredEducationLevel: null,
-        educationLevelIsVerified: false, // Initialize
-        inferredAgeBracket: null,
-        ageBracketIsVerified: false, // Initialize
+        // REMOVED educationLevelIsVerified
+        // REMOVED inferredAgeBracket
+        // REMOVED ageBracketIsVerified
         inferredGender: null,
-        genderIsVerified: false, // Initialize
+        // REMOVED genderIsVerified
       },
       preferences: preferences || [],
       privacySettings: {
diff --git a/api-service/service/UserProfileService.js b/api-service/service/UserProfileService.js
index d376a22..6906c65 100644
--- a/api-service/service/UserProfileService.js
+++ b/api-service/service/UserProfileService.js
@@ -111,13 +111,11 @@ exports.updateUserProfile = async function (req, body) {
     // --- Update Demographic Data ---
     // Use dot notation to set fields within the demographicData object
 
-    // User-provided fields (existing logic)
-    if (body.demographicData?.gender !== undefined) { // Check within demographicData object
+    // User-provided fields
+    if (body.demographicData?.gender !== undefined) {
         updateData['demographicData.gender'] = body.demographicData.gender;
+        updateData['demographicData.inferredGender'] = null; // Clear inferred on user update
         demographicsChanged = true;
-        // If gender is being set by user, clear the inferred gender and its verification
-        updateData['demographicData.inferredGender'] = null;
-        updateData['demographicData.genderIsVerified'] = false; // Reset verification if user changes main field
     }
     if (body.demographicData?.incomeBracket !== undefined) {
         updateData['demographicData.incomeBracket'] = body.demographicData.incomeBracket;
@@ -129,58 +127,41 @@ exports.updateUserProfile = async function (req, body) {
     }
     if (body.demographicData?.age !== undefined) {
         const ageValue = body.demographicData.age === null ? null : parseInt(body.demographicData.age);
-        if (ageValue === null || !isNaN(ageValue)) {
+        if (ageValue === null || (!isNaN(ageValue) && ageValue >= 0)) { // Added age >= 0 check
              updateData['demographicData.age'] = ageValue;
+             // No inferred age bracket to clear anymore
              demographicsChanged = true;
-             // If age is being set by user, clear the inferred age bracket and its verification
-             updateData['demographicData.inferredAgeBracket'] = null;
-             updateData['demographicData.ageBracketIsVerified'] = false; // Reset verification
         } else {
             console.warn(`Invalid age value provided for user ${auth0UserId}: ${body.demographicData.age}`);
             // Optionally return a 400 error here
+            // return respondWithCode(400, { code: 400, message: 'Invalid age provided.' });
         }
     }
-
-    // --- NEW: Handle Verification Flags ---
-    // Only allow setting verification flags via this endpoint
-    if (body.demographicData?.hasKidsIsVerified !== undefined && typeof body.demographicData.hasKidsIsVerified === 'boolean') {
-        updateData['demographicData.hasKidsIsVerified'] = body.demographicData.hasKidsIsVerified;
-        demographicsChanged = true; // Consider verification change as demographic change for cache invalidation
-    }
-    if (body.demographicData?.relationshipStatusIsVerified !== undefined && typeof body.demographicData.relationshipStatusIsVerified === 'boolean') {
-        updateData['demographicData.relationshipStatusIsVerified'] = body.demographicData.relationshipStatusIsVerified;
+    // --- NEW User-Provided Fields ---
+    if (body.demographicData?.hasKids !== undefined) {
+        updateData['demographicData.hasKids'] = body.demographicData.hasKids;
+        updateData['demographicData.inferredHasKids'] = null; // Clear inferred on user update
         demographicsChanged = true;
     }
-    if (body.demographicData?.employmentStatusIsVerified !== undefined && typeof body.demographicData.employmentStatusIsVerified === 'boolean') {
-        updateData['demographicData.employmentStatusIsVerified'] = body.demographicData.employmentStatusIsVerified;
+    if (body.demographicData?.relationshipStatus !== undefined) {
+        updateData['demographicData.relationshipStatus'] = body.demographicData.relationshipStatus;
+        updateData['demographicData.inferredRelationshipStatus'] = null; // Clear inferred on user update
         demographicsChanged = true;
     }
-    if (body.demographicData?.educationLevelIsVerified !== undefined && typeof body.demographicData.educationLevelIsVerified === 'boolean') {
-        updateData['demographicData.educationLevelIsVerified'] = body.demographicData.educationLevelIsVerified;
+    if (body.demographicData?.employmentStatus !== undefined) {
+        updateData['demographicData.employmentStatus'] = body.demographicData.employmentStatus;
+        updateData['demographicData.inferredEmploymentStatus'] = null; // Clear inferred on user update
         demographicsChanged = true;
     }
-    if (body.demographicData?.ageBracketIsVerified !== undefined && typeof body.demographicData.ageBracketIsVerified === 'boolean') {
-        // Only allow verifying inferred age bracket if user hasn't provided their specific age
-        const currentUserDoc = await db.collection('users').findOne({ auth0Id: auth0UserId }, { projection: { 'demographicData.age': 1 } });
-        if (currentUserDoc?.demographicData?.age === null) {
-            updateData['demographicData.ageBracketIsVerified'] = body.demographicData.ageBracketIsVerified;
-            demographicsChanged = true;
-        } else {
-            console.warn(`User ${auth0UserId} attempted to verify age bracket when specific age is set.`);
-            // Do not update the flag if specific age is provided
-        }
-    }
-    if (body.demographicData?.genderIsVerified !== undefined && typeof body.demographicData.genderIsVerified === 'boolean') {
-         // Only allow verifying inferred gender if user hasn't provided their specific gender
-        const currentUserDoc = await db.collection('users').findOne({ auth0Id: auth0UserId }, { projection: { 'demographicData.gender': 1 } });
-         if (currentUserDoc?.demographicData?.gender === null) {
-            updateData['demographicData.genderIsVerified'] = body.demographicData.genderIsVerified;
-            demographicsChanged = true;
-         } else {
-            console.warn(`User ${auth0UserId} attempted to verify inferred gender when specific gender is set.`);
-            // Do not update the flag if specific gender is provided
-         }
+    if (body.demographicData?.educationLevel !== undefined) {
+        updateData['demographicData.educationLevel'] = body.demographicData.educationLevel;
+        updateData['demographicData.inferredEducationLevel'] = null; // Clear inferred on user update
+        demographicsChanged = true;
     }
+
+    // --- REMOVED Verification Flag Handling ---
+    // The logic for hasKidsIsVerified, relationshipStatusIsVerified, etc. is removed.
+
     // --- End Update Demographic Data ---
 
 
diff --git a/api-service/utils/dbSchemas.js b/api-service/utils/dbSchemas.js
index c34feb5..3598b27 100644
--- a/api-service/utils/dbSchemas.js
+++ b/api-service/utils/dbSchemas.js
@@ -57,66 +57,58 @@ const userSchema = {
               description: 'User-provided age', // Clarified description
               minimum: 0,
             },
-            // --- Inferred fields ---
-            inferredHasKids: {
+            // --- NEW User-Provided fields (mirroring inferred ones) ---
+            hasKids: {
               bsonType: ['bool', 'null'],
-              description: 'Inferred: Does the user likely have children? (null if unknown)',
+              description: 'User-provided: Does the user have children?',
             },
-            hasKidsIsVerified: { // NEW verification flag
-              bsonType: 'bool',
-              description: 'Flag indicating if inferredHasKids has been verified by the user',
-              default: false // Default to false
+            relationshipStatus: {
+              bsonType: ['string', 'null'],
+              description: 'User-provided: User relationship status',
+              enum: ['single', 'relationship', 'married', 'prefer_not_to_say', null], // Added prefer_not_to_say
             },
-            inferredRelationshipStatus: {
+            employmentStatus: {
+              bsonType: ['string', 'null'],
+              description: 'User-provided: User employment status',
+              enum: ['employed', 'unemployed', 'student', 'prefer_not_to_say', null], // Added prefer_not_to_say
+            },
+            educationLevel: {
               bsonType: ['string', 'null'],
-              description: 'Inferred: User relationship status (null if unknown)',
-              enum: ['single', 'relationship', 'married', null],
+              description: 'User-provided: User education level',
+              enum: ['high_school', 'bachelors', 'masters', 'doctorate', 'prefer_not_to_say', null], // Added prefer_not_to_say
+            },
+            // --- Inferred fields (kept separate, no verification flags) ---
+            inferredHasKids: {
+              bsonType: ['bool', 'null'],
+              description: 'Inferred: Does the user likely have children? (null if unknown or user provided)',
             },
-            relationshipStatusIsVerified: { // NEW verification flag
-              bsonType: 'bool',
-              description: 'Flag indicating if inferredRelationshipStatus has been verified by the user',
-              default: false
+            // REMOVED hasKidsIsVerified
+            inferredRelationshipStatus: {
+              bsonType: ['string', 'null'],
+              description: 'Inferred: User relationship status (null if unknown or user provided)',
+              enum: ['single', 'relationship', 'married', null], // Inferred won't be 'prefer_not_to_say'
             },
+            // REMOVED relationshipStatusIsVerified
             inferredEmploymentStatus: {
               bsonType: ['string', 'null'],
-              description: 'Inferred: User employment status (null if unknown)',
+              description: 'Inferred: User employment status (null if unknown or user provided)',
               enum: ['employed', 'unemployed', 'student', null],
             },
-            employmentStatusIsVerified: { // NEW verification flag
-              bsonType: 'bool',
-              description: 'Flag indicating if inferredEmploymentStatus has been verified by the user',
-              default: false
-            },
+            // REMOVED employmentStatusIsVerified
             inferredEducationLevel: {
               bsonType: ['string', 'null'],
-              description: 'Inferred: User education level (null if unknown)',
+              description: 'Inferred: User education level (null if unknown or user provided)',
               enum: ['high_school', 'bachelors', 'masters', 'doctorate', null],
             },
-            educationLevelIsVerified: { // NEW verification flag
-              bsonType: 'bool',
-              description: 'Flag indicating if inferredEducationLevel has been verified by the user',
-              default: false
-            },
-            inferredAgeBracket: { // Kept separate from user-provided 'age'
+            // REMOVED educationLevelIsVerified
+            // REMOVED inferredAgeBracket
+            // REMOVED ageBracketIsVerified
+            inferredGender: { // Kept inferred gender
               bsonType: ['string', 'null'],
-              description: 'Inferred: User age bracket (null if unknown or age provided)', // Clarified description
-              enum: ['18-24', '25-34', '35-44', '45-54', '55-64', '65+', null],
-            },
-            ageBracketIsVerified: { // NEW verification flag
-              bsonType: 'bool',
-              description: 'Flag indicating if inferredAgeBracket has been verified by the user',
-              default: false
-            },
-            inferredGender: { // NEW inferred field
-              bsonType: ['string', 'null'],
-              description: 'Inferred: User gender identity (null if unknown or gender provided)',
-              enum: ['male', 'female', 'non-binary', null], // Note: 'prefer_not_to_say' is user-only
-            },
-            genderIsVerified: { // NEW verification flag
-              bsonType: 'bool',
-              description: 'Flag indicating if inferredGender has been verified by the user',
-              default: false
+              description: 'Inferred: User gender identity (null if unknown or user provided)',
+              enum: ['male', 'female', 'non-binary', null],
             },
+            // REMOVED genderIsVerified
           }
         },
         // --- End: Demographic Data Object ---
diff --git a/ml-service/app/services/demographicInference.py b/ml-service/app/services/demographicInference.py
index 9d30368..8bed9eb 100644
--- a/ml-service/app/services/demographicInference.py
+++ b/ml-service/app/services/demographicInference.py
@@ -25,33 +25,27 @@
     "relationship_status": {
         "married": {"wedding", "anniversary", "spouse", "husband", "wife"},
         "relationship": {"boyfriend", "girlfriend", "dating", "partner gift", "couples"}
-        # 'single' is hard to determine via keywords reliably
     },
     "employment_status": {
         "student": {"student loan", "internship", "university", "college", "textbook", "dorm"},
-        "unemployed": {"resume help", "job search"} # Still weak signals
+        "unemployed": {"resume help", "job search"}
     },
     "education_level": {
         "doctorate": {"phd", "dissertation", "postdoc"},
         "masters": {"master's degree", "thesis"},
         "bachelors": {"bachelor's degree", "undergrad"},
-        # 'high_school' is too ambiguous
     },
-    "gender": { # Use with extreme caution - high potential for bias
+    "gender": { # Use with extreme caution
         "male": {"men's", "for him", "grooming kit men"},
         "female": {"women's", "for her", "makeup set", "feminine hygiene"}
     }
-    # No reliable keywords for age_bracket
 }
 
 # --- NEW: Evidence Weights ---
 RULE_MATCH_WEIGHT = 1.5
 SEMANTIC_MATCH_WEIGHT = 1.0
-# --- End NEW Configuration ---
 
-
-# --- Semantic Target Descriptions (Keep as is) ---
-# Keys should match the field names in DemographicData (e.g., inferredHasKids -> has_kids)
+# --- Semantic Target Descriptions ---
 SEMANTIC_TARGETS = {
     "has_kids": {
         True: [
@@ -62,26 +56,25 @@
             "maternity wear or products",
             "family activities or vacations",
         ],
-        # False is hard to infer semantically, rely on lack of True evidence
     },
     "relationship_status": {
         "married": [
             "wedding gifts or planning items",
             "anniversary presents",
             "items for spouse or partner",
-            "joint home purchases", # Requires more context than just text
+            "joint home purchases",
             "husband or wife related items",
         ],
         "relationship": [
             "gifts for partner or significant other",
             "couples items or activities",
             "romantic presents",
-            "dating related items", # Can overlap with single, use threshold
+            "dating related items",
             "items for boyfriend or girlfriend",
         ],
         "single": [
             "items for one person",
-            "dating app subscriptions", # Very specific if found
+            "dating app subscriptions",
             "solo travel or activities",
             "self-care items focused on independence",
         ]
@@ -102,10 +95,9 @@
             "internship-related items",
             "study aids",
         ],
-        "unemployed": [ # Very hard to infer reliably from purchases/searches
+        "unemployed": [
             "job searching resources",
             "resume building services",
-            # "unemployment benefit applications" # Unlikely purchase/search
         ]
     },
     "education_level": {
@@ -126,72 +118,28 @@
             "college supplies",
             "university merchandise",
         ],
-        "high_school": [ # Very hard to infer post-facto
-            "high school supplies", # Overlaps heavily
-            # "ged preparation"
-        ]
-    },
-    "age_bracket": { # Extremely unreliable, keep targets broad
-        "18-24": [
-            "college student items",
-            "first apartment essentials",
-            "entry-level job search",
-            "youth fashion trends",
-            "music festivals or concerts",
-        ],
-        "25-34": [
-            "young professional items",
-            "starting a family supplies", # Overlaps kids
-            "new homeowner items",
-            "advanced career development",
-            "travel and experiences",
-        ],
-        "35-44": [
-            "mid-career professional items",
-            "family-oriented products", # Overlaps kids
-            "home renovation supplies",
-            "investment or retirement planning",
-        ],
-        "45-54": [
-            "senior management or executive items",
-            "planning for children's college",
-            "luxury travel or hobbies",
-            "health and wellness focus",
-        ],
-        "55-64": [
-            "pre-retirement planning",
-            "downsizing home items",
-            "travel for seniors",
-            "health monitoring devices",
-            "grandparent gifts",
-        ],
-        "65+": [
-            "retirement living items",
-            "senior health care products",
-            "hobby supplies for retirees",
-            "accessible travel",
-            "gifts for grandchildren",
+        "high_school": [
+            "high school supplies",
         ]
     },
     "gender": { # Also potentially unreliable/sensitive
          "male": [
              "men's clothing and accessories",
              "grooming products typically for men",
-             "hobbies stereotypically associated with men", # Be very careful with stereotypes
+             "hobbies stereotypically associated with men",
              "gifts for him",
          ],
          "female": [
              "women's clothing and accessories",
              "makeup and cosmetics",
              "skincare products typically for women",
-             "hobbies stereotypically associated with women", # Be very careful
+             "hobbies stereotypically associated with women",
              "gifts for her",
              "feminine hygiene products",
          ],
-         "non-binary": [ # Extremely difficult to infer semantically from general purchases
+         "non-binary": [
              "gender-neutral clothing",
              "unisex products",
-             # "lgbtq+ related merchandise" # Can be indicative but not definitive
          ]
     }
 }
@@ -370,11 +318,11 @@ async def _run_hybrid_inference_for_attribute( # Renamed for clarity
     # --- End Determine inferred value ---
 
 
-# --- Main Inference Runner (Updated to call hybrid helper) ---
+# --- Main Inference Runner (Updated) ---
 async def run_inference_for_user(user_id: str, email: str, db, limit: int = 50) -> bool:
     """
     Runs HYBRID demographic inference based on recent user data and updates
-    the user document if changes are found and the field is not verified by the user.
+    the user document if changes are found AND the user has not provided their own value.
     Returns True if the user document was updated, False otherwise.
     """
     logger.info(f"Running HYBRID demographic inference for user {user_id} ({email})")
@@ -399,58 +347,65 @@ async def run_inference_for_user(user_id: str, email: str, db, limit: int = 50)
 
         # Get Taxonomy Service (needed for embeddings)
         taxonomy_service = await get_taxonomy_service(db)
-        # No need to check embedding model availability here, helper function handles it
 
-        # --- Run hybrid inference functions ---
-        # Call the renamed helper function
-        inferred_kids = await _run_hybrid_inference_for_attribute("has_kids", recent_data, taxonomy_service)
-        inferred_status = await _run_hybrid_inference_for_attribute("relationship_status", recent_data, taxonomy_service)
-        inferred_employment = await _run_hybrid_inference_for_attribute("employment_status", recent_data, taxonomy_service)
-        inferred_education = await _run_hybrid_inference_for_attribute("education_level", recent_data, taxonomy_service)
-
-        # Conditional inference based on user-provided data
         current_demographics = user.get("demographicData", {})
-        inferred_age_bracket = None
-        if current_demographics.get("age") is None:
-            logger.info(f"Inference: User {email} has no age set, attempting age bracket inference.")
-            inferred_age_bracket = await _run_hybrid_inference_for_attribute("age_bracket", recent_data, taxonomy_service)
+
+        # --- Run hybrid inference functions (conditionally) ---
+        inferred_kids = None
+        if current_demographics.get("hasKids") is None:
+            inferred_kids = await _run_hybrid_inference_for_attribute("has_kids", recent_data, taxonomy_service)
+        else:
+            logger.info(f"Inference (has_kids): Skipped, user value exists ('{current_demographics.get('hasKids')}')")
+
+        inferred_status = None
+        if current_demographics.get("relationshipStatus") is None:
+            inferred_status = await _run_hybrid_inference_for_attribute("relationship_status", recent_data, taxonomy_service)
+        else:
+             logger.info(f"Inference (relationship_status): Skipped, user value exists ('{current_demographics.get('relationshipStatus')}')")
+
+        inferred_employment = None
+        if current_demographics.get("employmentStatus") is None:
+            inferred_employment = await _run_hybrid_inference_for_attribute("employment_status", recent_data, taxonomy_service)
+        else:
+             logger.info(f"Inference (employment_status): Skipped, user value exists ('{current_demographics.get('employmentStatus')}')")
+
+        inferred_education = None
+        if current_demographics.get("educationLevel") is None:
+            inferred_education = await _run_hybrid_inference_for_attribute("education_level", recent_data, taxonomy_service)
         else:
-            logger.info(f"Inference: User {email} has age set, skipping age bracket inference.")
+             logger.info(f"Inference (education_level): Skipped, user value exists ('{current_demographics.get('educationLevel')}')")
 
         inferred_gender = None
         if current_demographics.get("gender") is None:
-             logger.info(f"Inference: User {email} has no gender set, attempting gender inference.")
              inferred_gender = await _run_hybrid_inference_for_attribute("gender", recent_data, taxonomy_service)
         else:
-             logger.info(f"Inference: User {email} has gender set, skipping gender inference.")
+             logger.info(f"Inference (gender): Skipped, user value exists ('{current_demographics.get('gender')}')")
 
-        # --- Prepare update payload, respecting verification flags (No changes needed here) ---
+        # --- Prepare update payload (Simplified check_and_set) ---
         update_payload = {}
         now = datetime.now()
 
-        def check_and_set(field_name: str, inferred_value: Any, is_verified_flag: str):
-            current_value = current_demographics.get(field_name)
-            is_verified = current_demographics.get(is_verified_flag, False)
-
-            if inferred_value is not None and inferred_value != current_value:
-                if not is_verified:
-                    # Use dot notation for nested update
-                    db_field_name = f"demographicData.{field_name}"
-                    update_payload[db_field_name] = inferred_value
-                    logger.info(f"Inference update for {email}: {db_field_name} -> {inferred_value} (was {current_value}, verified: {is_verified})")
-                else:
-                    logger.info(f"Inference skipped for {email}: {field_name} is verified by user (Value: {current_value}). Would have inferred: {inferred_value}")
-
-        # Map inferred fields to their verification flags
-        check_and_set("inferredHasKids", inferred_kids, "hasKidsIsVerified")
-        check_and_set("inferredRelationshipStatus", inferred_status, "relationshipStatusIsVerified")
-        check_and_set("inferredEmploymentStatus", inferred_employment, "employmentStatusIsVerified")
-        check_and_set("inferredEducationLevel", inferred_education, "educationLevelIsVerified")
-        check_and_set("inferredAgeBracket", inferred_age_bracket, "ageBracketIsVerified")
-        check_and_set("inferredGender", inferred_gender, "genderIsVerified")
+        # Simplified: Only updates the inferred field if the new inference differs from the current inferred value
+        def check_and_set(field_name: str, inferred_value: Any):
+            # Note: field_name here is the *inferred* field name (e.g., "inferredHasKids")
+            current_inferred_value = current_demographics.get(field_name)
+
+            if inferred_value is not None and inferred_value != current_inferred_value:
+                # Use dot notation for nested update
+                db_field_name = f"demographicData.{field_name}"
+                update_payload[db_field_name] = inferred_value
+                logger.info(f"Inference update for {email}: {db_field_name} -> {inferred_value} (was {current_inferred_value})")
+            # No need to log skipping based on verification anymore
+
+        # Map inferred values to their DB field names
+        check_and_set("inferredHasKids", inferred_kids)
+        check_and_set("inferredRelationshipStatus", inferred_status)
+        check_and_set("inferredEmploymentStatus", inferred_employment)
+        check_and_set("inferredEducationLevel", inferred_education)
+        check_and_set("inferredGender", inferred_gender)
         # --- End Prepare update payload ---
 
-        # --- Update user document in DB if there are changes (No changes needed here) ---
+        # --- Update user document in DB if there are changes ---
         if update_payload:
             update_payload["updatedAt"] = now # Update timestamp
             result = await db.users.update_one(
@@ -459,26 +414,28 @@ def check_and_set(field_name: str, inferred_value: Any, is_verified_flag: str):
             )
             if result.modified_count > 0:
                 updated = True
-                logger.info(f"Inference: Successfully updated demographic data for user {user_id}")
+                logger.info(f"Inference: Successfully updated inferred demographic data for user {user_id}")
                 # --- Invalidate Caches ---
                 auth0_id = user.get("auth0Id")
                 if auth0_id:
                     await invalidate_cache(f"{CACHE_KEYS['USER_DATA']}{auth0_id}")
-                    await invalidate_cache(f"{CACHE_KEYS['PREFERENCES']}{auth0_id}")
+                    await invalidate_cache(f"{CACHE_KEYS['PREFERENCES']}{auth0_id}") # Invalidate prefs as demographics changed
                     # Invalidate store-specific caches if opt-in stores exist
                     if user.get("privacySettings", {}).get("optInStores"):
                         for store_id in user["privacySettings"]["optInStores"]:
-                            # CRITICAL FIX: Use user_object_id (ObjectId string) for store cache key consistency
+                            # Use user_id (ObjectId string) for store cache key consistency
                             await invalidate_cache(f"{CACHE_KEYS['STORE_PREFERENCES']}{user_id}:{store_id}")
                     logger.info(f"Inference: Invalidated relevant caches for user {auth0_id}")
                 # --- End Cache Invalidation ---
             else:
                 logger.warning(f"Inference: Update attempted for {user_id} but no documents were modified.")
         else:
-            logger.info(f"Inference: No demographic updates found for {user_id}")
+            logger.info(f"Inference: No inferred demographic updates needed for {user_id}")
 
     except Exception as e:
         logger.error(f"Error during demographic inference for user {user_id}: {str(e)}", exc_info=True)
+        # Do not return True here, as the update didn't necessarily succeed
+        updated = False # Ensure updated is False on error
 
     return updated
     # --- End Main Inference Runner ---
diff --git a/web/src/api/types/data-contracts.ts b/web/src/api/types/data-contracts.ts
index 56ed96c..3974817 100644
--- a/web/src/api/types/data-contracts.ts
+++ b/web/src/api/types/data-contracts.ts
@@ -95,17 +95,18 @@ export interface StoreCreate {
 export interface UserUpdate {
   /** User's unique username */
   username?: string;
-  /** User's phone number (E.164 format recommended) */
+  /**
+   * User's phone number (E.164 format recommended)
+   * @pattern ^\+?[\d\s-]+$
+   */
   phone?: string;
   /** User interest preferences with taxonomy categorization */
   preferences?: PreferenceItem[];
   privacySettings?: {
     dataSharingConsent?: boolean;
     anonymizeData?: boolean;
-    optInStores?: string[];
-    optOutStores?: string[];
   };
-  /** Updatable demographic information (user-provided and verification flags). */
+  /** Updatable user-provided demographic information. Setting a value here implies verification and may clear inferred values. */
   demographicData?: {
     /** User-provided gender identity */
     gender?: "male" | "female" | "non-binary" | "prefer_not_to_say" | null;
@@ -121,22 +122,35 @@ export interface UserUpdate {
     /** User-provided country of residence (e.g., ISO 3166-1 alpha-2 code) */
     country?: string | null;
     /**
-     * User-provided age. Setting this clears inferredAgeBracket.
+     * User-provided age. Setting this clears the inferred age bracket.
      * @format int32
+     * @min 0
      */
     age?: number | null;
-    /** Set to true by the user to confirm the inferred 'hasKids' status. */
-    hasKidsIsVerified?: boolean;
-    /** Set to true by the user to confirm the inferred 'relationshipStatus'. */
-    relationshipStatusIsVerified?: boolean;
-    /** Set to true by the user to confirm the inferred 'employmentStatus'. */
-    employmentStatusIsVerified?: boolean;
-    /** Set to true by the user to confirm the inferred 'educationLevel'. */
-    educationLevelIsVerified?: boolean;
-    /** Set to true by the user to confirm the inferred 'ageBracket'. Only applicable if 'age' is not set. */
-    ageBracketIsVerified?: boolean;
-    /** Set to true by the user to confirm the inferred 'gender'. Only applicable if 'gender' is not set. */
-    genderIsVerified?: boolean;
+    /** User-provided: Does the user have children? */
+    hasKids?: boolean | null;
+    /** User-provided: User relationship status */
+    relationshipStatus?:
+      | "single"
+      | "relationship"
+      | "married"
+      | "prefer_not_to_say"
+      | null;
+    /** User-provided: User employment status */
+    employmentStatus?:
+      | "employed"
+      | "unemployed"
+      | "student"
+      | "prefer_not_to_say"
+      | null;
+    /** User-provided: User education level */
+    educationLevel?:
+      | "high_school"
+      | "bachelors"
+      | "masters"
+      | "doctorate"
+      | "prefer_not_to_say"
+      | null;
   };
 }
 
@@ -432,63 +446,61 @@ export interface DemographicData {
   /**
    * User-provided age
    * @format int32
+   * @min 0
    * @example 35
    */
   age?: number | null;
-  /** Inferred: Does the user likely have children? (null if unknown) */
-  inferredHasKids?: boolean | null;
   /**
-   * Flag indicating if inferredHasKids has been verified by the user
-   * @default false
+   * User-provided: Does the user have children?
+   * @example true
    */
-  hasKidsIsVerified?: boolean;
-  /** Inferred: User relationship status (null if unknown) */
-  inferredRelationshipStatus?: "single" | "relationship" | "married" | null;
+  hasKids?: boolean | null;
   /**
-   * Flag indicating if inferredRelationshipStatus has been verified by the user
-   * @default false
+   * User-provided: User relationship status
+   * @example "married"
    */
-  relationshipStatusIsVerified?: boolean;
-  /** Inferred: User employment status (null if unknown) */
-  inferredEmploymentStatus?: "employed" | "unemployed" | "student" | null;
+  relationshipStatus?:
+    | "single"
+    | "relationship"
+    | "married"
+    | "prefer_not_to_say"
+    | null;
   /**
-   * Flag indicating if inferredEmploymentStatus has been verified by the user
-   * @default false
+   * User-provided: User employment status
+   * @example "employed"
    */
-  employmentStatusIsVerified?: boolean;
-  /** Inferred: User education level (null if unknown) */
-  inferredEducationLevel?:
+  employmentStatus?:
+    | "employed"
+    | "unemployed"
+    | "student"
+    | "prefer_not_to_say"
+    | null;
+  /**
+   * User-provided: User education level
+   * @example "bachelors"
+   */
+  educationLevel?:
     | "high_school"
     | "bachelors"
     | "masters"
     | "doctorate"
+    | "prefer_not_to_say"
     | null;
-  /**
-   * Flag indicating if inferredEducationLevel has been verified by the user
-   * @default false
-   */
-  educationLevelIsVerified?: boolean;
-  /** Inferred: User age bracket (null if unknown or age provided) */
-  inferredAgeBracket?:
-    | "18-24"
-    | "25-34"
-    | "35-44"
-    | "45-54"
-    | "55-64"
-    | "65+"
+  /** Inferred: Does the user likely have children? (null if unknown or user provided) */
+  inferredHasKids?: boolean | null;
+  /** Inferred: User relationship status (null if unknown or user provided) */
+  inferredRelationshipStatus?: "single" | "relationship" | "married" | null;
+  /** Inferred: User employment status (null if unknown or user provided) */
+  inferredEmploymentStatus?: "employed" | "unemployed" | "student" | null;
+  /** Inferred: User education level (null if unknown or user provided) */
+  inferredEducationLevel?:
+    | "high_school"
+    | "bachelors"
+    | "masters"
+    | "doctorate"
     | null;
-  /**
-   * Flag indicating if inferredAgeBracket has been verified by the user
-   * @default false
-   */
-  ageBracketIsVerified?: boolean;
-  /** Inferred: User gender identity (null if unknown or gender provided) */
+  /** Inferred: User gender identity (null if unknown or user provided) */
   inferredGender?: "male" | "female" | "non-binary" | null;
-  /**
-   * Flag indicating if inferredGender has been verified by the user
-   * @default false
-   */
-  genderIsVerified?: boolean;
 }
 
 export interface RecentUserDataEntry {

From e69b9a09086b1058fdbd325dee22a7215f3f03cd Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 03:35:12 +0530
Subject: [PATCH 12/21] feat: Expand demographic form to include additional
 fields and improve data handling

---
 .../UserDashboard/UserPreferencesPage.tsx     | 528 +++++++++++++-----
 1 file changed, 377 insertions(+), 151 deletions(-)

diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index 32f17dd..a1a9601 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -1,4 +1,3 @@
-import React, { useState, useEffect, useMemo } from "react";
 import {
   Card,
   Button,
@@ -10,44 +9,61 @@ import {
   ModalFooter,
   Label,
   TextInput,
-  Select, // Already imported
+  Select,
+  ToggleSwitch, // <-- Add ToggleSwitch for boolean fields
   RangeSlider,
   List,
   ListItem,
 } from "flowbite-react";
 import {
-  HiInformationCircle,
-  HiPencil,
-  HiTrash,
-  HiPlus,
   HiUser,
-  HiSparkles,
   HiOutlineUserCircle,
   HiOutlineCake,
   HiOutlineGlobeAlt,
   HiOutlineCash,
-} from "react-icons/hi";
+  HiOutlineAcademicCap, // <-- Icon for education
+  HiOutlineBriefcase, // <-- Icon for employment
+  HiOutlineUsers, // <-- Icon for relationship
+  HiOutlineHeart, // <-- Icon for hasKids
+  HiInformationCircle,
+  HiSparkles,
+  HiPlus,
+  HiPencil,
+  HiTrash,
+  HiCheck,
+  HiX,
+} from "react-icons/hi"; // <-- Add new icons
+import { useForm, SubmitHandler, Controller } from "react-hook-form";
+import { useEffect, useState, useMemo } from "react";
 import {
   useUserProfile,
   useUserPreferences,
   useUpdateUserProfile,
   useUpdateUserPreferences,
-} from "../../api/hooks/useUserHooks";
-import { useTaxonomy } from "../../api/hooks/useTaxonomyHooks";
+} from "../../api/hooks/useUserHooks"; // <-- Corrected import path
+import { useTaxonomy } from "../../api/hooks/useTaxonomyHooks"; // <-- Corrected import path
 import {
   UserUpdate,
   PreferenceItem,
   TaxonomyCategory,
+  DemographicData, // <-- Import DemographicData type
 } from "../../api/types/data-contracts";
 import LoadingSpinner from "../../components/common/LoadingSpinner";
 import ErrorDisplay from "../../components/common/ErrorDisplay";
-import { Controller, SubmitHandler, useForm } from "react-hook-form";
-import countryData from "../../data/countries.json"; // <-- Import country data
+import countryData from "../../data/countries.json";
 
 // --- Form Types ---
+// Update to include all user-editable demographic fields
 type DemographicsFormData = Pick<
-  UserUpdate,
-  "gender" | "age" | "country" | "incomeBracket"
+  DemographicData, // Use DemographicData type directly
+  | "gender"
+  | "age"
+  | "country"
+  | "incomeBracket"
+  | "hasKids"
+  | "relationshipStatus"
+  | "employmentStatus"
+  | "educationLevel"
 >;
 type PreferenceFormData = {
   category: string;
@@ -55,7 +71,7 @@ type PreferenceFormData = {
   attributes?: Record<string, string | undefined>;
 };
 
-// --- Define options for selects (copied from UserRegistrationForm) ---
+// --- Define options for selects ---
 const genderOptions = [
   { value: "", label: "Select Gender" },
   { value: "male", label: "Male" },
@@ -74,6 +90,33 @@ const incomeOptions = [
   { value: "prefer_not_to_say", label: "Prefer not to say" },
 ];
 
+// --- NEW Options ---
+const relationshipOptions = [
+  { value: "", label: "Select Relationship Status" },
+  { value: "single", label: "Single" },
+  { value: "relationship", label: "In a relationship" },
+  { value: "married", label: "Married" },
+  { value: "prefer_not_to_say", label: "Prefer not to say" },
+];
+
+const employmentOptions = [
+  { value: "", label: "Select Employment Status" },
+  { value: "employed", label: "Employed" },
+  { value: "unemployed", label: "Unemployed" },
+  { value: "student", label: "Student" },
+  { value: "prefer_not_to_say", label: "Prefer not to say" },
+];
+
+const educationOptions = [
+  { value: "", label: "Select Education Level" },
+  { value: "high_school", label: "High School" },
+  { value: "bachelors", label: "Bachelor's Degree" },
+  { value: "masters", label: "Master's Degree" },
+  { value: "doctorate", label: "Doctorate" },
+  { value: "prefer_not_to_say", label: "Prefer not to say" },
+];
+// --- End NEW Options ---
+
 // --- Country Options (copied from UserRegistrationForm) ---
 interface CountryOption {
   value: string;
@@ -163,7 +206,8 @@ const UserPreferencesPage: React.FC = () => {
     register: registerDemo,
     handleSubmit: handleDemoSubmit,
     reset: resetDemoForm,
-    formState: { isDirty: isDemoDirty },
+    control: demoControl, // <-- Add control for ToggleSwitch
+    formState: { isDirty: isDemoDirty, errors: demoErrors }, // <-- Add errors
   } = useForm<DemographicsFormData>();
 
   const {
@@ -177,13 +221,19 @@ const UserPreferencesPage: React.FC = () => {
     defaultValues: { category: "", attributes: {}, score: 50 },
   });
 
+  // Update useEffect to reset ALL demographic fields
   useEffect(() => {
-    if (userProfile && !isEditingDemographics) {
+    if (userProfile?.demographicData && !isEditingDemographics) {
       resetDemoForm({
-        gender: userProfile?.demographicData?.gender || "",
-        age: userProfile?.demographicData?.age || undefined,
-        country: userProfile?.demographicData?.country || "",
-        incomeBracket: userProfile?.demographicData?.incomeBracket || "",
+        gender: userProfile.demographicData.gender ?? null, // Use ?? null
+        age: userProfile.demographicData.age ?? undefined, // Use ?? for null/undefined
+        country: userProfile.demographicData.country ?? null, // Use ?? null
+        incomeBracket: userProfile.demographicData.incomeBracket ?? null, // Use ?? null
+        hasKids: userProfile.demographicData.hasKids ?? null, // Default to null
+        relationshipStatus:
+          userProfile.demographicData.relationshipStatus ?? null, // Use ?? null
+        employmentStatus: userProfile.demographicData.employmentStatus ?? null, // Use ?? null
+        educationLevel: userProfile.demographicData.educationLevel ?? null, // Use ?? null
       });
     }
   }, [userProfile, isEditingDemographics, resetDemoForm]);
@@ -267,27 +317,45 @@ const UserPreferencesPage: React.FC = () => {
   }, [selectedCategoryId, attributeMap]);
 
   // --- Handlers ---
+  // Update onDemoSubmit to handle all fields and nest payload
   const onDemoSubmit: SubmitHandler<DemographicsFormData> = (data) => {
-    // Filter out empty strings or nulls before sending
-    const payload: Partial<UserUpdate> = {}; // Use UserUpdate for payload type
-    if (data.gender && data.gender !== "") payload.gender = data.gender;
-    else payload.gender = null; // Explicitly set to null if empty
-
-    if (data.age !== undefined && data.age !== null && !isNaN(data.age))
-      payload.age = Number(data.age);
-    else payload.age = null; // Explicitly set to null if empty/invalid
-
-    if (data.country && data.country !== "") payload.country = data.country;
-    else payload.country = null; // Explicitly set to null if empty
+    // Construct the nested demographicData payload
+    const demoPayload: Partial<DemographicData> = {};
+
+    // Handle each field, setting to null if empty/default
+    demoPayload.gender = data.gender ? data.gender : null;
+    demoPayload.age =
+      data.age !== undefined && data.age !== null && !isNaN(data.age)
+        ? Number(data.age)
+        : null;
+    demoPayload.country = data.country ? data.country : null;
+    demoPayload.incomeBracket = data.incomeBracket ? data.incomeBracket : null;
+    // Handle boolean (null is allowed)
+    demoPayload.hasKids = data.hasKids === undefined ? null : data.hasKids;
+    demoPayload.relationshipStatus = data.relationshipStatus
+      ? data.relationshipStatus
+      : null;
+    demoPayload.employmentStatus = data.employmentStatus
+      ? data.employmentStatus
+      : null;
+    demoPayload.educationLevel = data.educationLevel
+      ? data.educationLevel
+      : null;
+
+    // Construct the final UserUpdate payload
+    const finalPayload: UserUpdate = {
+      demographicData: demoPayload,
+    };
 
-    if (data.incomeBracket && data.incomeBracket !== "")
-      payload.incomeBracket = data.incomeBracket;
-    else payload.incomeBracket = null; // Explicitly set to null if empty
+    console.log("Submitting demographic update:", finalPayload); // Debug log
 
-    // Only submit if there are actual changes
-    if (Object.keys(payload).length > 0) {
-      updateProfile(payload as UserUpdate, {
+    // Only submit if the form is dirty (React Hook Form tracks this)
+    if (isDemoDirty) {
+      updateProfile(finalPayload, {
         onSuccess: () => setIsEditingDemographics(false),
+        onError: (err) => {
+          console.error("Profile update failed:", err); // Log error
+        },
       });
     } else {
       // No changes detected, just exit edit mode
@@ -374,6 +442,22 @@ const UserPreferencesPage: React.FC = () => {
     );
   }
 
+  // Helper to format boolean/null
+  const formatBoolean = (value: boolean | null | undefined): string => {
+    if (value === true) return "Yes";
+    if (value === false) return "No";
+    return "Not set";
+  };
+
+  // Helper to format enum values
+  const formatEnum = (
+    value: string | null | undefined,
+    options: { value: string; label: string }[],
+  ): string => {
+    const found = options.find((opt) => opt.value === value);
+    return found?.label || value || "Not set";
+  };
+
   return (
     <div className="container mx-auto px-4 py-12">
       <h2 className="mb-8 text-3xl font-bold text-gray-900 dark:text-white">
@@ -390,7 +474,7 @@ const UserPreferencesPage: React.FC = () => {
             </h3>
             {!isEditingDemographics && (
               <Button
-                color="light"
+                color="gray"
                 size="sm"
                 onClick={() => setIsEditingDemographics(true)}
                 disabled={isMutating}
@@ -405,95 +489,152 @@ const UserPreferencesPage: React.FC = () => {
             </Alert>
           )}
           {isEditingDemographics ? (
+            // --- EDIT FORM ---
             <form
               onSubmit={handleDemoSubmit(onDemoSubmit)}
-              className="mt-4 space-y-4" // Use space-y for consistent spacing
+              className="mt-4 space-y-4"
             >
-              {/* --- Gender Select --- */}
+              {/* Gender */}
               <div>
                 <Label htmlFor="gender">Gender</Label>
-                <Select
-                  id="gender"
-                  {...registerDemo("gender")} // Register the select
-                  className="mt-1"
-                  defaultValue={userProfile?.demographicData?.gender || ""} // Set default value for reset
-                >
+                <Select id="gender" {...registerDemo("gender")}>
                   {genderOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
+                    <option key={option.value} value={option.value ?? ""}>
+                      {" "}
+                      {/* Ensure value is not null/undefined */}
                       {option.label}
                     </option>
                   ))}
                 </Select>
               </div>
+              {/* Age */}
               <div>
                 <Label htmlFor="age">Age</Label>
                 <TextInput
                   id="age"
                   type="number"
-                  {...registerDemo("age", { valueAsNumber: true })}
-                  placeholder="e.g., 30"
-                  min="0" // Add min value
-                  className="mt-1"
+                  placeholder="Enter your age"
+                  {...registerDemo("age", {
+                    valueAsNumber: true,
+                    min: { value: 0, message: "Age cannot be negative" },
+                  })}
                 />
+                {demoErrors.age && (
+                  <p className="mt-1 text-xs text-red-600">
+                    {demoErrors.age.message}
+                  </p>
+                )}
               </div>
+              {/* Country */}
               <div>
                 <Label htmlFor="country">Country</Label>
-                <Select
-                  id="country"
-                  {...registerDemo("country")} // Register the select
-                  className="mt-1"
-                  defaultValue={userProfile?.demographicData?.country || ""} // Set default value
-                >
+                <Select id="country" {...registerDemo("country")}>
                   {countryOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
+                    <option key={option.value} value={option.value ?? ""}>
+                      {" "}
+                      {/* Ensure value is not null/undefined */}
                       {option.label}
                     </option>
                   ))}
                 </Select>
               </div>
-              {/* --- Income Bracket Select --- */}
+              {/* Income Bracket */}
               <div>
                 <Label htmlFor="incomeBracket">Income Bracket</Label>
+                <Select id="incomeBracket" {...registerDemo("incomeBracket")}>
+                  {incomeOptions.map((option) => (
+                    <option key={option.value} value={option.value ?? ""}>
+                      {" "}
+                      {/* Ensure value is not null/undefined */}
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              {/* Has Kids */}
+              <Controller
+                name="hasKids"
+                control={demoControl}
+                render={({ field: { onChange, value, name } }) => (
+                  <ToggleSwitch
+                    label="Do you have children?"
+                    checked={value === true} // Handle null/undefined for initial state
+                    onChange={(checked) => onChange(checked)} // Directly pass boolean
+                    name={name}
+                  />
+                )}
+              />
+              {/* Relationship Status */}
+              <div>
+                <Label htmlFor="relationshipStatus">Relationship Status</Label>
                 <Select
-                  id="incomeBracket"
-                  {...registerDemo("incomeBracket")} // Register the select
-                  className="mt-1"
-                  defaultValue={
-                    userProfile?.demographicData?.incomeBracket || ""
-                  } // Set default value for reset
+                  id="relationshipStatus"
+                  {...registerDemo("relationshipStatus")}
                 >
-                  {incomeOptions.map((option) => (
-                    <option key={option.value} value={option.value}>
+                  {relationshipOptions.map((option) => (
+                    <option key={option.value} value={option.value ?? ""}>
+                      {" "}
+                      {/* Ensure value is not null/undefined */}
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+              {/* Employment Status */}
+              <div>
+                <Label htmlFor="employmentStatus">Employment Status</Label>
+                <Select
+                  id="employmentStatus"
+                  {...registerDemo("employmentStatus")}
+                >
+                  {employmentOptions.map((option) => (
+                    <option key={option.value} value={option.value ?? ""}>
+                      {" "}
+                      {/* Ensure value is not null/undefined */}
                       {option.label}
                     </option>
                   ))}
                 </Select>
               </div>
-              <div className="mt-6 flex justify-end gap-3">
+              {/* Education Level */}
+              <div>
+                <Label htmlFor="educationLevel">Education Level</Label>
+                <Select id="educationLevel" {...registerDemo("educationLevel")}>
+                  {educationOptions.map((option) => (
+                    <option key={option.value} value={option.value ?? ""}>
+                      {" "}
+                      {/* Ensure value is not null/undefined */}
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+
+              {/* Form Actions */}
+              <div className="flex justify-end space-x-3 pt-2">
                 <Button
                   color="gray"
                   onClick={() => {
                     setIsEditingDemographics(false);
-                    // Reset form to original values on cancel
-                    resetDemoForm({
-                      gender: userProfile?.demographicData?.gender || "",
-                      age: userProfile?.demographicData?.age || undefined,
-                      country: userProfile?.demographicData?.country || "",
-                      incomeBracket:
-                        userProfile?.demographicData?.incomeBracket || "",
-                    });
+                    resetDemoForm(); // Reset to original values on cancel
                   }}
                   disabled={isMutating}
                 >
-                  Cancel
+                  <HiX className="mr-1 h-4 w-4" /> Cancel
                 </Button>
-                <Button type="submit" disabled={isMutating || !isDemoDirty}>
+                <Button
+                  type="submit"
+                  color="success"
+                  disabled={isUpdatingProfile || !isDemoDirty}
+                >
                   {isUpdatingProfile ? (
                     <>
                       <Spinner size="sm" className="mr-2" /> Saving...
                     </>
                   ) : (
-                    "Save Changes"
+                    <>
+                      <HiCheck className="mr-1 h-4 w-4" /> Save Changes
+                    </>
                   )}
                 </Button>
               </div>
@@ -501,10 +642,17 @@ const UserPreferencesPage: React.FC = () => {
           ) : (
             // --- DISPLAY VIEW ---
             <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
+              {/* User Provided */}
+              <h4 className="col-span-full mt-2 text-sm font-semibold text-gray-600 dark:text-gray-400">
+                Your Information
+              </h4>
               <DemoInfoCard
                 icon={HiOutlineUserCircle}
                 label="Gender"
-                value={userProfile?.demographicData?.gender}
+                value={formatEnum(
+                  userProfile?.demographicData?.gender,
+                  genderOptions,
+                )}
                 isLoading={profileLoading}
               />
               <DemoInfoCard
@@ -516,13 +664,102 @@ const UserPreferencesPage: React.FC = () => {
               <DemoInfoCard
                 icon={HiOutlineGlobeAlt}
                 label="Country"
-                value={userProfile?.demographicData?.country}
+                value={formatEnum(
+                  userProfile?.demographicData?.country,
+                  countryOptions,
+                )}
                 isLoading={profileLoading}
               />
               <DemoInfoCard
                 icon={HiOutlineCash}
                 label="Income"
-                value={userProfile?.demographicData?.incomeBracket}
+                value={formatEnum(
+                  userProfile?.demographicData?.incomeBracket,
+                  incomeOptions,
+                )}
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineHeart}
+                label="Has Children"
+                value={formatBoolean(userProfile?.demographicData?.hasKids)}
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineUsers}
+                label="Relationship"
+                value={formatEnum(
+                  userProfile?.demographicData?.relationshipStatus,
+                  relationshipOptions,
+                )}
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineBriefcase}
+                label="Employment"
+                value={formatEnum(
+                  userProfile?.demographicData?.employmentStatus,
+                  employmentOptions,
+                )}
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineAcademicCap}
+                label="Education"
+                value={formatEnum(
+                  userProfile?.demographicData?.educationLevel,
+                  educationOptions,
+                )}
+                isLoading={profileLoading}
+              />
+
+              {/* Inferred (Read-only) */}
+              <h4 className="col-span-full mt-4 text-sm font-semibold text-gray-600 dark:text-gray-400">
+                Inferred Information{" "}
+                <span className="text-xs font-normal">(Read-only)</span>
+              </h4>
+              <DemoInfoCard
+                icon={HiOutlineUserCircle}
+                label="Inferred Gender"
+                value={formatEnum(
+                  userProfile?.demographicData?.inferredGender,
+                  genderOptions,
+                )} // Use same options for display
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineHeart}
+                label="Inferred Has Children"
+                value={formatBoolean(
+                  userProfile?.demographicData?.inferredHasKids,
+                )}
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineUsers}
+                label="Inferred Relationship"
+                value={formatEnum(
+                  userProfile?.demographicData?.inferredRelationshipStatus,
+                  relationshipOptions,
+                )} // Use same options
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineBriefcase}
+                label="Inferred Employment"
+                value={formatEnum(
+                  userProfile?.demographicData?.inferredEmploymentStatus,
+                  employmentOptions,
+                )} // Use same options
+                isLoading={profileLoading}
+              />
+              <DemoInfoCard
+                icon={HiOutlineAcademicCap}
+                label="Inferred Education"
+                value={formatEnum(
+                  userProfile?.demographicData?.inferredEducationLevel,
+                  educationOptions,
+                )} // Use same options
                 isLoading={profileLoading}
               />
             </div>
@@ -558,77 +795,61 @@ const UserPreferencesPage: React.FC = () => {
           <div className="mt-4">
             {preferencesData?.preferences &&
             preferencesData.preferences.length > 0 ? (
-              <List unstyled className="space-y-3">
+              <List unstyled>
                 {preferencesData.preferences.map((pref, index) => {
-                  // Extract attribute display logic
-                  const attributesDisplay =
-                    pref.attributes &&
-                    Object.entries(pref.attributes).map(([key, valueObj]) => {
-                      let displayValue = "[Complex Value]";
-                      if (typeof valueObj === "object" && valueObj !== null) {
-                        const firstKey = Object.keys(valueObj)[0];
-                        if (firstKey) displayValue = firstKey;
-                      } else if (typeof valueObj === "string") {
-                        displayValue = valueObj;
-                      }
-                      return { key, displayValue };
-                    });
+                  const categoryName =
+                    categoryMap.get(pref.category)?.name || pref.category;
+                  const attributeEntries = Object.entries(
+                    pref.attributes || {},
+                  );
 
                   return (
                     <ListItem
                       key={index}
-                      className="flex flex-col items-start rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-700"
+                      className="mb-3 rounded-lg border border-gray-200 p-4 dark:border-gray-700"
                     >
-                      <div className="mb-3 flex-grow sm:mb-0">
-                        <span className="block text-base font-semibold text-gray-800 dark:text-gray-200">
-                          {categoryMap.get(pref.category || "")?.name ||
-                            "Unknown Category"}
-                        </span>
-                        <span className="block text-sm text-gray-600 dark:text-gray-400">
-                          Score:{" "}
-                          {pref.score !== null && pref.score !== undefined
-                            ? Math.round(pref.score * 100)
-                            : "N/A"}
-                        </span>
-                        {attributesDisplay && attributesDisplay.length > 0 && (
-                          <div className="mt-1 text-xs">
-                            {attributesDisplay.map(({ key, displayValue }) => (
-                              <span
-                                key={key}
-                                className="mt-1 mr-1.5 inline-block rounded bg-gray-100 px-1.5 py-0.5 dark:bg-gray-600 dark:text-gray-200"
-                              >
-                                <span className="font-medium">
-                                  {attributeMap
-                                    .get(pref.category || "")
-                                    ?.get(key) || key}
-                                  :
-                                </span>{" "}
-                                {displayValue}
-                              </span>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                      <div className="flex flex-shrink-0 gap-2 self-end sm:self-center">
-                        <Button
-                          size="xs"
-                          color="light"
-                          onClick={() => openEditModal(index)}
-                          disabled={isMutating}
-                          aria-label="Edit interest"
-                        >
-                          <HiPencil />
-                        </Button>
-                        <Button
-                          size="xs"
-                          color="failure"
-                          outline
-                          onClick={() => handleRemovePreference(index)}
-                          disabled={isMutating}
-                          aria-label="Delete interest"
-                        >
-                          <HiTrash />
-                        </Button>
+                      <div className="flex items-center justify-between">
+                        <div>
+                          <p className="font-semibold text-gray-900 dark:text-white">
+                            {categoryName}
+                          </p>
+                          <p className="text-sm text-gray-500 dark:text-gray-400">
+                            Score:{" "}
+                            {pref.score !== null && pref.score !== undefined
+                              ? `${Math.round(pref.score * 100)}%`
+                              : "N/A"}
+                          </p>
+                          {attributeEntries.length > 0 && (
+                            <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                              Attributes:{" "}
+                              {attributeEntries
+                                .map(([attrKey, valueObj]) => {
+                                  // Get the first key (value) from the inner object
+                                  const attrValue = Object.keys(valueObj)[0];
+                                  return `${attrKey}: ${attrValue}`;
+                                })
+                                .join(", ")}
+                            </div>
+                          )}
+                        </div>
+                        <div className="flex space-x-2">
+                          <Button
+                            color="light"
+                            size="xs"
+                            onClick={() => openEditModal(index)}
+                            disabled={isMutating}
+                          >
+                            <HiPencil />
+                          </Button>
+                          <Button
+                            color="failure"
+                            size="xs"
+                            onClick={() => handleRemovePreference(index)}
+                            disabled={isMutating}
+                          >
+                            <HiTrash />
+                          </Button>
+                        </div>
                       </div>
                     </ListItem>
                   );
@@ -636,8 +857,7 @@ const UserPreferencesPage: React.FC = () => {
               </List>
             ) : (
               <p className="text-center text-gray-500 dark:text-gray-400">
-                You haven't added any specific interests yet. Click "Add
-                Interest" to get started.
+                You haven't added any interests yet.
               </p>
             )}
           </div>
@@ -707,7 +927,13 @@ const UserPreferencesPage: React.FC = () => {
                         <TextInput
                           id={`attr-${attrName}`}
                           {...registerPref(`attributes.${attrName}`)}
-                          placeholder={`e.g., ${attrName === "color" ? "Blue" : attrName === "brand" ? "Acme" : "Any"}`}
+                          placeholder={`e.g., ${
+                            attrName === "color"
+                              ? "Blue"
+                              : attrName === "brand"
+                                ? "Acme"
+                                : "Any"
+                          }`}
                           className="text-sm"
                         />
                       </div>

From c033855c73d577e440d1fe738d280f4e7335f18f Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 03:46:27 +0530
Subject: [PATCH 13/21] feat: Add allowInference field to privacy settings and
 update related logic for demographic inference

---
 api-service/api/openapi.yaml                  | 51 ++++++++++++-------
 api-service/service/AuthenticationService.js  |  4 +-
 api-service/service/UserProfileService.js     |  6 ++-
 api-service/utils/dbSchemas.js                |  8 ++-
 .../app/services/preferenceProcessor.py       | 29 +++++++----
 5 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index d1e9b61..045a393 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -898,24 +898,7 @@ components:
           type: string
           pattern: ^\+?[\d\s-]+$
         privacySettings:
-          type: object
-          properties:
-            dataSharingConsent:
-              type: boolean
-              default: false
-            anonymizeData:
-              type: boolean
-              default: false
-            optInStores:
-              type: array
-              items:
-                type: string
-              description: List of store IDs user has opted into
-            optOutStores:
-              type: array
-              items:
-                type: string
-              description: List of store IDs user has opted out from
+          $ref: "#/components/schemas/PrivacySettings"
         demographicData:
           $ref: "#/components/schemas/DemographicData"
         createdAt:
@@ -927,6 +910,35 @@ components:
           format: date-time
           readOnly: true
 
+    PrivacySettings:
+      type: object
+      properties:
+        dataSharingConsent:
+          type: boolean
+          description: User consent to share aggregated/anonymized data.
+        anonymizeData:
+          type: boolean
+          description: User preference to anonymize data where possible (future use).
+          default: false
+        allowInference: # <-- Add allowInference here
+          type: boolean
+          description: Allow Tapiro to infer demographic data based on user activity.
+          default: true
+        optInStores:
+          type: array
+          items:
+            type: string
+            format: objectId # Assuming store IDs are ObjectIds represented as strings
+          description: List of store IDs the user explicitly allows data sharing with.
+        optOutStores:
+          type: array
+          items:
+            type: string
+            format: objectId # Assuming store IDs are ObjectIds represented as strings
+          description: List of store IDs the user explicitly blocks data sharing with.
+      required:
+        - dataSharingConsent # Only this is strictly required on creation
+
     Store:
       type: object
       required:
@@ -987,6 +999,9 @@ components:
         dataSharingConsent:
           type: boolean
           description: User's consent for data sharing
+        allowInference:
+          type: boolean
+          description: Allow Tapiro to infer demographic data (defaults to true if omitted).
         gender:
           type: string
           nullable: true
diff --git a/api-service/service/AuthenticationService.js b/api-service/service/AuthenticationService.js
index e13680f..9e9ebf8 100644
--- a/api-service/service/AuthenticationService.js
+++ b/api-service/service/AuthenticationService.js
@@ -13,10 +13,11 @@ const { CACHE_TTL, CACHE_KEYS } = require('../utils/cacheConfig');
 exports.registerUser = async function (req, body) {
   try {
     const db = getDB();
-    // Destructure new demographic fields
+    // Destructure new demographic fields AND allowInference
     const {
       preferences,
       dataSharingConsent,
+      allowInference, // <-- Add allowInference
       gender,
       incomeBracket,
       country,
@@ -128,6 +129,7 @@ exports.registerUser = async function (req, body) {
       privacySettings: {
         dataSharingConsent,
         anonymizeData: false,
+        allowInference: allowInference !== undefined ? allowInference : true, // <-- Set allowInference, default true
         optInStores: [],
         optOutStores: [],
       },
diff --git a/api-service/service/UserProfileService.js b/api-service/service/UserProfileService.js
index 6906c65..1959e8c 100644
--- a/api-service/service/UserProfileService.js
+++ b/api-service/service/UserProfileService.js
@@ -177,6 +177,10 @@ exports.updateUserProfile = async function (req, body) {
         updateData['privacySettings.anonymizeData'] = body.privacySettings.anonymizeData;
         privacySettingsChanged = true;
       }
+      if (body.privacySettings.allowInference !== undefined) { // <-- Add check for allowInference
+        updateData['privacySettings.allowInference'] = body.privacySettings.allowInference;
+        privacySettingsChanged = true;
+      }
       // DO NOT update optInStores or optOutStores here
     }
 
@@ -217,7 +221,7 @@ exports.updateUserProfile = async function (req, body) {
     }
 
     // Invalidate store-specific preferences if demographics or relevant privacy settings changed
-    // Also invalidate if the optInStores list exists (safer to clear on any profile update)
+    // (Keep existing logic, as privacySettingsChanged flag now includes allowInference)
     const updatedUserDoc = result; // Use the returned document from findOneAndUpdate
     if ((demographicsChanged || privacySettingsChanged) && updatedUserDoc.privacySettings?.optInStores) {
        const userObjectId = updatedUserDoc._id; // Use the _id from the updated result
diff --git a/api-service/utils/dbSchemas.js b/api-service/utils/dbSchemas.js
index 3598b27..780291e 100644
--- a/api-service/utils/dbSchemas.js
+++ b/api-service/utils/dbSchemas.js
@@ -147,8 +147,12 @@ const userSchema = {
           properties: {
             dataSharingConsent: { bsonType: 'bool' },
             anonymizeData: { bsonType: 'bool' },
-            optInStores: { bsonType: 'array', items: { bsonType: 'string' } }, // Specify item type
-            optOutStores: { bsonType: 'array', items: { bsonType: 'string' } }, // Specify item type
+            allowInference: { // <-- Add new field
+              bsonType: 'bool',
+              description: 'Allow Tapiro to infer demographic data based on user activity (default: true)',
+            },
+            optInStores: { bsonType: 'array', items: { bsonType: 'string' } },
+            optOutStores: { bsonType: 'array', items: { bsonType: 'string' } },
           },
         },
         createdAt: { bsonType: 'date' },
diff --git a/ml-service/app/services/preferenceProcessor.py b/ml-service/app/services/preferenceProcessor.py
index 7ae867e..8a022b2 100644
--- a/ml-service/app/services/preferenceProcessor.py
+++ b/ml-service/app/services/preferenceProcessor.py
@@ -47,6 +47,10 @@ async def process_user_data(data: UserDataEntry, db) -> UserPreferences:
     user_id = str(user["_id"]) # Use the confirmed user ID from DB
     logger.info(f"Found user {email} with DB ID {user_id}")
 
+    # --- Check Inference Permission ---
+    privacy_settings = user.get("privacySettings", {})
+    allow_inference = privacy_settings.get("allowInference", True) # Default to True if missing
+
     # Extract demographics from the nested 'demographicData' field
     user_demographics_nested = user.get("demographicData", {})
     # Flatten the dictionary to pass to processing functions
@@ -155,18 +159,21 @@ async def process_user_data(data: UserDataEntry, db) -> UserPreferences:
     except Exception as e:
         logger.error(f"Failed to update userData status for {email}: {str(e)}")
 
-    # --- Run Demographic Inference (After main processing) ---
+    # --- Run Demographic Inference (Conditionally) ---
     inference_updated_user = False
-    try:
-        logger.info(f"Starting demographic inference for user {email} ({user_id})")
-        inference_updated_user = await run_inference_for_user(user_id, email, db)
-        if inference_updated_user:
-             logger.info(f"Demographic inference updated user document for {email}")
-             # Cache invalidation is handled within run_inference_for_user
-        else:
-             logger.info(f"Demographic inference did not result in updates for user {email}")
-    except Exception as inference_error:
-        logger.error(f"Demographic inference failed for user {email}: {inference_error}", exc_info=True)
+    if allow_inference: # <-- Check the flag
+        try:
+            logger.info(f"Starting demographic inference for user {email} ({user_id}) as allowInference is True.")
+            inference_updated_user = await run_inference_for_user(user_id, email, db)
+            if inference_updated_user:
+                 logger.info(f"Demographic inference updated user document for {email}")
+                 # Cache invalidation is handled within run_inference_for_user
+            else:
+                 logger.info(f"Demographic inference did not result in updates for user {email}")
+        except Exception as inference_error:
+            logger.error(f"Demographic inference failed for user {email}: {inference_error}", exc_info=True)
+    else:
+        logger.info(f"Skipping demographic inference for user {email} ({user_id}) as allowInference is False.")
     # --- End Demographic Inference ---
 
 

From b23c71b875b774fbffb25dd66b1d82f1408e661e Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 04:09:20 +0530
Subject: [PATCH 14/21] feat: Update UserPreferencesPage to enhance demographic
 data handling with new options and verification logic

---
 .../UserDashboard/UserPreferencesPage.tsx     | 342 ++++++++++++++----
 1 file changed, 265 insertions(+), 77 deletions(-)

diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index a1a9601..e365e18 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -10,7 +10,6 @@ import {
   Label,
   TextInput,
   Select,
-  ToggleSwitch, // <-- Add ToggleSwitch for boolean fields
   RangeSlider,
   List,
   ListItem,
@@ -117,6 +116,15 @@ const educationOptions = [
 ];
 // --- End NEW Options ---
 
+// --- Has Kids Options ---
+const hasKidsOptions = [
+  { value: "", label: "Select an option" }, // Default/unset option
+  { value: "true", label: "Yes" },
+  { value: "false", label: "No" },
+  { value: "prefer_not_to_say", label: "Prefer not to say" }, // Represented by null in the data
+];
+// --- End Has Kids Options ---
+
 // --- Country Options (copied from UserRegistrationForm) ---
 interface CountryOption {
   value: string;
@@ -132,12 +140,20 @@ const countryOptions: CountryOption[] = [
 ];
 // --- End Country Options ---
 
-// --- Mini Demographic Card Component (Keep existing) ---
+// --- Mini Demographic Card Component ---
+// filepath: /Users/cdevmina/Projects/Tapiro/web/src/pages/UserDashboard/UserPreferencesPage.tsx
 interface DemoInfoCardProps {
   icon: React.ElementType;
   label: string;
   value: string | number | null | undefined;
   isLoading?: boolean;
+  isInferred?: boolean; // Added: Flag for inferred data
+  fieldName?: keyof DemographicsFormData; // Added: Field name for verification
+  onVerify?: (
+    fieldName: keyof DemographicsFormData,
+    // --- CHANGE HERE ---
+    valueToVerify: string | number | boolean | null | undefined,
+  ) => void; // Added: Handler for verify button
 }
 
 const DemoInfoCard: React.FC<DemoInfoCardProps> = ({
@@ -145,6 +161,9 @@ const DemoInfoCard: React.FC<DemoInfoCardProps> = ({
   label,
   value,
   isLoading,
+  isInferred, // Destructure
+  fieldName, // Destructure
+  onVerify, // Destructure
 }) => (
   <div className="flex items-center rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800">
     <Icon className="mr-3 h-6 w-6 flex-shrink-0 text-gray-500 dark:text-gray-400" />
@@ -155,9 +174,30 @@ const DemoInfoCard: React.FC<DemoInfoCardProps> = ({
       {isLoading ? (
         <Spinner size="xs" />
       ) : (
-        <p className="text-sm font-semibold text-gray-900 dark:text-white">
-          {value || "Not set"}
-        </p>
+        <div className="flex items-center">
+          {" "}
+          {/* Wrap value and button */}
+          <p className="text-sm font-semibold text-gray-900 dark:text-white">
+            {value || "Not set"}
+            {isInferred &&
+              value && ( // Show "(inferred)" text
+                <span className="ml-1 text-xs font-normal text-gray-500 dark:text-gray-400">
+                  (inferred)
+                </span>
+              )}
+          </p>
+          {/* Show Verify button if inferred, has value, not loading, and handler provided */}
+          {isInferred && value && !isLoading && fieldName && onVerify && (
+            <Button
+              size="xs"
+              color="light"
+              className="ml-2 px-2 py-1" // Adjusted padding for smaller button
+              onClick={() => onVerify(fieldName, value)} // Call handler with fieldName and current value
+            >
+              Verify
+            </Button>
+          )}
+        </div>
       )}
     </div>
   </div>
@@ -206,7 +246,7 @@ const UserPreferencesPage: React.FC = () => {
     register: registerDemo,
     handleSubmit: handleDemoSubmit,
     reset: resetDemoForm,
-    control: demoControl, // <-- Add control for ToggleSwitch
+    setValue: setValueDemo, // <-- Get setValue for verification
     formState: { isDirty: isDemoDirty, errors: demoErrors }, // <-- Add errors
   } = useForm<DemographicsFormData>();
 
@@ -221,7 +261,7 @@ const UserPreferencesPage: React.FC = () => {
     defaultValues: { category: "", attributes: {}, score: 50 },
   });
 
-  // Update useEffect to reset ALL demographic fields
+  // Update useEffect to reset ALL demographic fields when NOT editing
   useEffect(() => {
     if (userProfile?.demographicData && !isEditingDemographics) {
       resetDemoForm({
@@ -250,9 +290,9 @@ const UserPreferencesPage: React.FC = () => {
         const formAttributes: Record<string, string | undefined> = {};
         if (pref.attributes) {
           Object.entries(pref.attributes).forEach(([key, valueObj]) => {
+            // Attempt to get the first key if it's an object like { "Blue": 1.0 }
             let displayValue: string | undefined = undefined;
             if (typeof valueObj === "object" && valueObj !== null) {
-              // Attempt to get the first key if it's an object like { "Blue": 1.0 }
               const firstKey = Object.keys(valueObj)[0];
               if (firstKey) displayValue = firstKey;
             } else if (typeof valueObj === "string") {
@@ -331,6 +371,7 @@ const UserPreferencesPage: React.FC = () => {
     demoPayload.country = data.country ? data.country : null;
     demoPayload.incomeBracket = data.incomeBracket ? data.incomeBracket : null;
     // Handle boolean (null is allowed)
+    // Ensure undefined from form becomes null for API
     demoPayload.hasKids = data.hasKids === undefined ? null : data.hasKids;
     demoPayload.relationshipStatus = data.relationshipStatus
       ? data.relationshipStatus
@@ -422,7 +463,66 @@ const UserPreferencesPage: React.FC = () => {
     setEditingPreferenceIndex(index);
     setShowPreferenceModal(true);
   };
+  const handleVerify = (
+    fieldName: keyof DemographicsFormData,
+    // --- CHANGE HERE ---
+    valueToVerify: string | number | boolean | null | undefined,
+  ) => {
+    setIsEditingDemographics(true);
+    // Use timeout to ensure state update completes before setting value
+    setTimeout(() => {
+      // Convert boolean "Yes"/"No" back to boolean for ToggleSwitch
+      // --- FIX: Handle potential undefined from valueToVerify ---
+      let formValue: string | number | boolean | null = valueToVerify ?? null;
+
+      // Find the corresponding value for enum fields OR hasKids
+      if (fieldName === "hasKids") {
+        // Find the option matching the display label
+        const option = hasKidsOptions.find((o) => o.label === valueToVerify);
+        // Convert the option's string value back to boolean/null
+        formValue =
+          option?.value === "true"
+            ? true
+            : option?.value === "false"
+              ? false
+              : null;
+      } else if (fieldName === "gender")
+        formValue =
+          genderOptions.find((o) => o.label === valueToVerify)?.value ?? null;
+      else if (fieldName === "country")
+        formValue =
+          countryOptions.find((o) => o.label === valueToVerify)?.value ?? null;
+      else if (fieldName === "incomeBracket")
+        formValue =
+          incomeOptions.find((o) => o.label === valueToVerify)?.value ?? null;
+      else if (fieldName === "relationshipStatus")
+        formValue =
+          relationshipOptions.find((o) => o.label === valueToVerify)?.value ??
+          null;
+      else if (fieldName === "employmentStatus")
+        formValue =
+          employmentOptions.find((o) => o.label === valueToVerify)?.value ??
+          null;
+      else if (fieldName === "educationLevel")
+        formValue =
+          educationOptions.find((o) => o.label === valueToVerify)?.value ??
+          null;
+      // Ensure age is treated as a number or null for the form
+      else if (fieldName === "age") {
+        // Use valueToVerify here as formValue might already be null
+        formValue = typeof valueToVerify === "number" ? valueToVerify : null;
+      }
+
+      // Use setValueDemo with the potentially transformed formValue
+      setValueDemo(fieldName, formValue, { shouldDirty: true });
 
+      // Optional: Focus the element after setting value
+      const element = document.getElementById(fieldName);
+      element?.focus();
+      element?.scrollIntoView({ behavior: "smooth", block: "center" });
+    }, 0);
+    console.log(`Verifying ${fieldName} with value:`, valueToVerify);
+  };
   // --- Render Logic ---
   const isLoading = profileLoading || preferencesLoading || taxonomyLoading;
   const error = profileError || preferencesError || taxonomyError;
@@ -515,8 +615,13 @@ const UserPreferencesPage: React.FC = () => {
                   type="number"
                   placeholder="Enter your age"
                   {...registerDemo("age", {
-                    valueAsNumber: true,
+                    valueAsNumber: true, // Keep this if API expects number
                     min: { value: 0, message: "Age cannot be negative" },
+                    validate: (value) =>
+                      value === null ||
+                      value === undefined ||
+                      !isNaN(value) ||
+                      "Invalid age", // Allow null/undefined
                   })}
                 />
                 {demoErrors.age && (
@@ -551,19 +656,27 @@ const UserPreferencesPage: React.FC = () => {
                   ))}
                 </Select>
               </div>
-              {/* Has Kids */}
-              <Controller
-                name="hasKids"
-                control={demoControl}
-                render={({ field: { onChange, value, name } }) => (
-                  <ToggleSwitch
-                    label="Do you have children?"
-                    checked={value === true} // Handle null/undefined for initial state
-                    onChange={(checked) => onChange(checked)} // Directly pass boolean
-                    name={name}
-                  />
-                )}
-              />
+              {/* Has Kids - Changed to Select */}
+              <div>
+                <Label htmlFor="hasKids">Do you have children?</Label>
+                <Select
+                  id="hasKids"
+                  {...registerDemo("hasKids", {
+                    // Convert string "true"/"false" back to boolean, handle ""/"prefer_not_to_say" as null
+                    setValueAs: (value) => {
+                      if (value === "true") return true;
+                      if (value === "false") return false;
+                      return null; // Treat "" and "prefer_not_to_say" as null
+                    },
+                  })}
+                >
+                  {hasKidsOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
               {/* Relationship Status */}
               <div>
                 <Label htmlFor="relationshipStatus">Relationship Status</Label>
@@ -640,12 +753,9 @@ const UserPreferencesPage: React.FC = () => {
               </div>
             </form>
           ) : (
-            // --- DISPLAY VIEW ---
+            // --- DISPLAY VIEW (Combined User-Provided and Inferred) ---
             <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2">
-              {/* User Provided */}
-              <h4 className="col-span-full mt-2 text-sm font-semibold text-gray-600 dark:text-gray-400">
-                Your Information
-              </h4>
+              {/* User Provided or Verified */}
               <DemoInfoCard
                 icon={HiOutlineUserCircle}
                 label="Gender"
@@ -654,12 +764,20 @@ const UserPreferencesPage: React.FC = () => {
                   genderOptions,
                 )}
                 isLoading={profileLoading}
+                // If user provided is null, show inferred with verify button
+                isInferred={
+                  !userProfile?.demographicData?.gender &&
+                  !!userProfile?.demographicData?.inferredGender
+                }
+                fieldName="gender"
+                onVerify={handleVerify}
               />
               <DemoInfoCard
                 icon={HiOutlineCake}
                 label="Age"
-                value={userProfile?.demographicData?.age}
+                value={userProfile?.demographicData?.age} // Age is number, no enum formatting
                 isLoading={profileLoading}
+                // No inferred age currently, so no verify needed here
               />
               <DemoInfoCard
                 icon={HiOutlineGlobeAlt}
@@ -669,6 +787,7 @@ const UserPreferencesPage: React.FC = () => {
                   countryOptions,
                 )}
                 isLoading={profileLoading}
+                // No inferred country currently
               />
               <DemoInfoCard
                 icon={HiOutlineCash}
@@ -678,12 +797,34 @@ const UserPreferencesPage: React.FC = () => {
                   incomeOptions,
                 )}
                 isLoading={profileLoading}
+                // No inferred income currently
               />
               <DemoInfoCard
                 icon={HiOutlineHeart}
                 label="Has Children"
-                value={formatBoolean(userProfile?.demographicData?.hasKids)}
+                // Use formatEnum with hasKidsOptions (convert boolean/null to string value first)
+                value={formatEnum(
+                  userProfile?.demographicData?.hasKids === true
+                    ? "true"
+                    : userProfile?.demographicData?.hasKids === false
+                      ? "false"
+                      : userProfile?.demographicData?.hasKids === null &&
+                          userProfile?.demographicData?.relationshipStatus ===
+                            "prefer_not_to_say" // Check if explicitly 'prefer_not_to_say' was saved
+                        ? "prefer_not_to_say" // Map null back to prefer_not_to_say if appropriate (might need adjustment based on API save logic)
+                        : "", // Default to empty string for "Not set" or other null cases
+                  hasKidsOptions,
+                )}
                 isLoading={profileLoading}
+                // Show inferred if user provided is null (and not explicitly 'prefer_not_to_say')
+                isInferred={
+                  userProfile?.demographicData?.hasKids === null &&
+                  userProfile?.demographicData?.inferredHasKids !== null &&
+                  userProfile?.demographicData?.relationshipStatus !==
+                    "prefer_not_to_say" // Don't show inferred if user chose 'prefer not to say'
+                }
+                fieldName="hasKids"
+                onVerify={handleVerify}
               />
               <DemoInfoCard
                 icon={HiOutlineUsers}
@@ -693,6 +834,13 @@ const UserPreferencesPage: React.FC = () => {
                   relationshipOptions,
                 )}
                 isLoading={profileLoading}
+                // Show inferred if user provided is null
+                isInferred={
+                  !userProfile?.demographicData?.relationshipStatus &&
+                  !!userProfile?.demographicData?.inferredRelationshipStatus
+                }
+                fieldName="relationshipStatus"
+                onVerify={handleVerify}
               />
               <DemoInfoCard
                 icon={HiOutlineBriefcase}
@@ -702,6 +850,13 @@ const UserPreferencesPage: React.FC = () => {
                   employmentOptions,
                 )}
                 isLoading={profileLoading}
+                // Show inferred if user provided is null
+                isInferred={
+                  !userProfile?.demographicData?.employmentStatus &&
+                  !!userProfile?.demographicData?.inferredEmploymentStatus
+                }
+                fieldName="employmentStatus"
+                onVerify={handleVerify}
               />
               <DemoInfoCard
                 icon={HiOutlineAcademicCap}
@@ -711,57 +866,90 @@ const UserPreferencesPage: React.FC = () => {
                   educationOptions,
                 )}
                 isLoading={profileLoading}
+                // Show inferred if user provided is null
+                isInferred={
+                  !userProfile?.demographicData?.educationLevel &&
+                  !!userProfile?.demographicData?.inferredEducationLevel
+                }
+                fieldName="educationLevel"
+                onVerify={handleVerify}
               />
 
-              {/* Inferred (Read-only) */}
-              <h4 className="col-span-full mt-4 text-sm font-semibold text-gray-600 dark:text-gray-400">
-                Inferred Information{" "}
-                <span className="text-xs font-normal">(Read-only)</span>
-              </h4>
-              <DemoInfoCard
-                icon={HiOutlineUserCircle}
-                label="Inferred Gender"
-                value={formatEnum(
-                  userProfile?.demographicData?.inferredGender,
-                  genderOptions,
-                )} // Use same options for display
-                isLoading={profileLoading}
-              />
-              <DemoInfoCard
-                icon={HiOutlineHeart}
-                label="Inferred Has Children"
-                value={formatBoolean(
-                  userProfile?.demographicData?.inferredHasKids,
+              {/* Display inferred values ONLY if user hasn't provided one */}
+              {!userProfile?.demographicData?.gender &&
+                userProfile?.demographicData?.inferredGender && (
+                  <DemoInfoCard
+                    icon={HiOutlineUserCircle}
+                    label="Gender" // Re-use label, it will show (inferred)
+                    value={formatEnum(
+                      userProfile?.demographicData?.inferredGender,
+                      genderOptions,
+                    )}
+                    isLoading={profileLoading}
+                    isInferred={true}
+                    fieldName="gender"
+                    onVerify={handleVerify}
+                  />
+                )}
+              {!userProfile?.demographicData?.hasKids &&
+                userProfile?.demographicData?.inferredHasKids !== null && (
+                  <DemoInfoCard
+                    icon={HiOutlineHeart}
+                    label="Has Children"
+                    value={formatBoolean(
+                      userProfile?.demographicData?.inferredHasKids,
+                    )}
+                    isLoading={profileLoading}
+                    isInferred={true}
+                    fieldName="hasKids"
+                    onVerify={handleVerify}
+                  />
+                )}
+              {!userProfile?.demographicData?.relationshipStatus &&
+                userProfile?.demographicData?.inferredRelationshipStatus && (
+                  <DemoInfoCard
+                    icon={HiOutlineUsers}
+                    label="Relationship"
+                    value={formatEnum(
+                      userProfile?.demographicData?.inferredRelationshipStatus,
+                      relationshipOptions,
+                    )}
+                    isLoading={profileLoading}
+                    isInferred={true}
+                    fieldName="relationshipStatus"
+                    onVerify={handleVerify}
+                  />
+                )}
+              {!userProfile?.demographicData?.employmentStatus &&
+                userProfile?.demographicData?.inferredEmploymentStatus && (
+                  <DemoInfoCard
+                    icon={HiOutlineBriefcase}
+                    label="Employment"
+                    value={formatEnum(
+                      userProfile?.demographicData?.inferredEmploymentStatus,
+                      employmentOptions,
+                    )}
+                    isLoading={profileLoading}
+                    isInferred={true}
+                    fieldName="employmentStatus"
+                    onVerify={handleVerify}
+                  />
+                )}
+              {!userProfile?.demographicData?.educationLevel &&
+                userProfile?.demographicData?.inferredEducationLevel && (
+                  <DemoInfoCard
+                    icon={HiOutlineAcademicCap}
+                    label="Education"
+                    value={formatEnum(
+                      userProfile?.demographicData?.inferredEducationLevel,
+                      educationOptions,
+                    )}
+                    isLoading={profileLoading}
+                    isInferred={true}
+                    fieldName="educationLevel"
+                    onVerify={handleVerify}
+                  />
                 )}
-                isLoading={profileLoading}
-              />
-              <DemoInfoCard
-                icon={HiOutlineUsers}
-                label="Inferred Relationship"
-                value={formatEnum(
-                  userProfile?.demographicData?.inferredRelationshipStatus,
-                  relationshipOptions,
-                )} // Use same options
-                isLoading={profileLoading}
-              />
-              <DemoInfoCard
-                icon={HiOutlineBriefcase}
-                label="Inferred Employment"
-                value={formatEnum(
-                  userProfile?.demographicData?.inferredEmploymentStatus,
-                  employmentOptions,
-                )} // Use same options
-                isLoading={profileLoading}
-              />
-              <DemoInfoCard
-                icon={HiOutlineAcademicCap}
-                label="Inferred Education"
-                value={formatEnum(
-                  userProfile?.demographicData?.inferredEducationLevel,
-                  educationOptions,
-                )} // Use same options
-                isLoading={profileLoading}
-              />
             </div>
           )}
         </Card>

From d01ef83b0fdcb1c188715be9dee5a7200c4249bb Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 04:18:12 +0530
Subject: [PATCH 15/21] style: Improve layout structure by wrapping cards in a
 grid and updating section labels for clarity

---
 web/src/pages/UserDashboard/UserPreferencesPage.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index e365e18..8412c0f 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -564,8 +564,9 @@ const UserPreferencesPage: React.FC = () => {
         Manage Your Profile & Interests
       </h2>
 
-      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
-        {/* --- Demographics Section (Left Column on Large Screens) --- */}
+      {/* wrap both cards in a grid */}
+      <div className="grid grid-cols-1 items-start gap-8 lg:grid-cols-3">
+        {/* --- Demographics Section (Left) */}
         <Card className="lg:col-span-1">
           <div className="flex items-center justify-between">
             <h3 className="flex items-center text-xl font-semibold text-gray-900 dark:text-white">
@@ -954,7 +955,7 @@ const UserPreferencesPage: React.FC = () => {
           )}
         </Card>
 
-        {/* --- Preferences Section (Right Column on Large Screens) --- */}
+        {/* --- Your Interests Card (Right) */}
         <Card className="lg:col-span-2">
           <div className="flex items-center justify-between">
             <h3 className="flex items-center text-xl font-semibold text-gray-900 dark:text-white">

From bac3c5bc331d83efbac9c7e81acb60894b89586d Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 04:20:54 +0530
Subject: [PATCH 16/21] feat: Refactor privacy settings in User interface and
 add UserProfilePage route

---
 web/src/api/types/data-contracts.ts | 32 ++++++++++++++++++++---------
 web/src/main.tsx                    |  5 +++++
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/web/src/api/types/data-contracts.ts b/web/src/api/types/data-contracts.ts
index 3974817..b88db6e 100644
--- a/web/src/api/types/data-contracts.ts
+++ b/web/src/api/types/data-contracts.ts
@@ -28,16 +28,7 @@ export interface User {
   username?: string;
   /** @pattern ^\+?[\d\s-]+$ */
   phone?: string;
-  privacySettings: {
-    /** @default false */
-    dataSharingConsent?: boolean;
-    /** @default false */
-    anonymizeData?: boolean;
-    /** List of store IDs user has opted into */
-    optInStores?: string[];
-    /** List of store IDs user has opted out from */
-    optOutStores?: string[];
-  };
+  privacySettings: PrivacySettings;
   /** User-provided and inferred demographic information */
   demographicData?: DemographicData;
   /** @format date-time */
@@ -46,6 +37,25 @@ export interface User {
   updatedAt?: string;
 }
 
+export interface PrivacySettings {
+  /** User consent to share aggregated/anonymized data. */
+  dataSharingConsent: boolean;
+  /**
+   * User preference to anonymize data where possible (future use).
+   * @default false
+   */
+  anonymizeData?: boolean;
+  /**
+   * Allow Tapiro to infer demographic data based on user activity.
+   * @default true
+   */
+  allowInference?: boolean;
+  /** List of store IDs the user explicitly allows data sharing with. */
+  optInStores?: string[];
+  /** List of store IDs the user explicitly blocks data sharing with. */
+  optOutStores?: string[];
+}
+
 export interface Store {
   storeId?: string;
   /** Auth0 organization ID */
@@ -69,6 +79,8 @@ export interface UserCreate {
   preferences?: PreferenceItem[];
   /** User's consent for data sharing */
   dataSharingConsent: boolean;
+  /** Allow Tapiro to infer demographic data (defaults to true if omitted). */
+  allowInference?: boolean;
   /** User gender identity */
   gender?: string | null;
   /** User income bracket category */
diff --git a/web/src/main.tsx b/web/src/main.tsx
index ebfc7f7..3483564 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -15,6 +15,7 @@ import { AuthProviderWrapper } from "./context/AuthContext";
 import PrivateRoute from "./components/auth/PrivateRoute";
 import NotFoundPage from "./pages/static/NotFoundPage";
 import StoreProfilePage from "./pages/StoreDashboard/StoreProfilePage";
+import UserProfilePage from "./pages/UserDashboard/UserProfilePage";
 
 const router = createBrowserRouter([
   {
@@ -45,6 +46,10 @@ const router = createBrowserRouter([
             path: "dashboard/user",
             element: <UserDashboard />,
           },
+          {
+            path: "profile/user",
+            element: <UserProfilePage />,
+          },
         ],
       },
       // --- Protected Store Routes ---

From 19a81cdb4bbbc45be8c89fd0d0df560352324417 Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 04:40:57 +0530
Subject: [PATCH 17/21] feat: Integrate allowInference field into privacy
 settings and update UserProfilePage and UserRegistrationForm

---
 api-service/api/openapi.yaml                  |   8 +-
 web/src/api/types/data-contracts.ts           |   5 +-
 .../components/auth/UserRegistrationForm.tsx  |  30 ++++-
 .../pages/UserDashboard/UserProfilePage.tsx   | 109 +++++++++++++-----
 4 files changed, 113 insertions(+), 39 deletions(-)

diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index 045a393..669daa4 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -1060,13 +1060,7 @@ components:
           items:
             $ref: "#/components/schemas/PreferenceItem"
         privacySettings:
-          type: object
-          properties:
-            dataSharingConsent:
-              type: boolean
-            anonymizeData:
-              type: boolean
-            # optInStores/optOutStores are handled by separate endpoints
+          $ref: "#/components/schemas/PrivacySettings"
         demographicData:
           type: object
           description: Updatable user-provided demographic information. Setting a value here implies verification and may clear inferred values.
diff --git a/web/src/api/types/data-contracts.ts b/web/src/api/types/data-contracts.ts
index b88db6e..7438d13 100644
--- a/web/src/api/types/data-contracts.ts
+++ b/web/src/api/types/data-contracts.ts
@@ -114,10 +114,7 @@ export interface UserUpdate {
   phone?: string;
   /** User interest preferences with taxonomy categorization */
   preferences?: PreferenceItem[];
-  privacySettings?: {
-    dataSharingConsent?: boolean;
-    anonymizeData?: boolean;
-  };
+  privacySettings?: PrivacySettings;
   /** Updatable user-provided demographic information. Setting a value here implies verification and may clear inferred values. */
   demographicData?: {
     /** User-provided gender identity */
diff --git a/web/src/components/auth/UserRegistrationForm.tsx b/web/src/components/auth/UserRegistrationForm.tsx
index 32cfa3f..41f1872 100644
--- a/web/src/components/auth/UserRegistrationForm.tsx
+++ b/web/src/components/auth/UserRegistrationForm.tsx
@@ -10,6 +10,7 @@ import {
   Popover,
   Select, // Already imported
   TextInput,
+  Tooltip, // <-- Import ToggleSwitch if you prefer it over Checkbox
 } from "flowbite-react";
 import { UserCreate } from "../../api/types/data-contracts";
 import LoadingSpinner from "../common/LoadingSpinner";
@@ -69,6 +70,8 @@ export function UserRegistrationForm({
   const [showConsentModal, setShowConsentModal] = useState(false);
   // State to track if consent has been explicitly accepted via the modal
   const [consentAccepted, setConsentAccepted] = useState(false);
+  // --- Add state for allowInference ---
+  const [allowInference, setAllowInference] = useState(true); // Default to true
 
   // Add state for demographic fields
   const [gender, setGender] = useState<string | null>(null);
@@ -88,6 +91,7 @@ export function UserRegistrationForm({
 
     const userData: UserCreate = {
       dataSharingConsent: dataSharingConsent,
+      allowInference: allowInference, // <-- Include allowInference
       preferences: [],
       gender: gender || null,
       incomeBracket: incomeBracket || null,
@@ -207,7 +211,8 @@ export function UserRegistrationForm({
         </div>
 
         {/* Consent Section */}
-        <div className="flex flex-col space-y-2 rounded border border-gray-200 p-4 dark:border-gray-600">
+        <div className="flex flex-col space-y-4 rounded border border-gray-200 p-4 dark:border-gray-600">
+          {/* --- Data Sharing Consent (Existing) --- */}
           {/* Conditionally wrap Checkbox/Label in Popover */}
           {!consentAccepted ? (
             <Popover content={popoverContent} trigger="hover">
@@ -248,6 +253,26 @@ export function UserRegistrationForm({
             </div>
           )}
 
+          {/* --- Allow Inference Toggle --- */}
+          <div className="flex items-center gap-2">
+            {/* Using Checkbox for consistency, but ToggleSwitch is also an option */}
+            <Checkbox
+              id="allow-inference"
+              checked={allowInference}
+              onChange={(e) => setAllowInference(e.target.checked)}
+            />
+            <Label
+              htmlFor="allow-inference"
+              className="flex text-gray-700 dark:text-gray-300"
+            >
+              Allow Tapiro to infer demographic insights{" "}
+              <Tooltip content="Tapiro can estimate demographic details like age group or interests based on your activity to improve personalization, even if you don't provide them directly. You can disable this anytime.">
+                <HiInformationCircle className="ml-1 h-4 w-4 cursor-help text-gray-400" />
+              </Tooltip>
+            </Label>
+          </div>
+          {/* --- End Allow Inference Toggle --- */}
+
           {/* Button to open the modal remains the same */}
           <button
             type="button"
@@ -260,7 +285,8 @@ export function UserRegistrationForm({
           {/* Confirmation message remains the same */}
           {consentAccepted && (
             <p className="mt-1 flex items-center text-sm text-green-600 dark:text-green-400">
-              <HiCheckCircle className="mr-1 h-4 w-4" /> Consent Accepted
+              <HiCheckCircle className="mr-1 h-4 w-4" /> Data Sharing Consent
+              Accepted
             </p>
           )}
         </div>
diff --git a/web/src/pages/UserDashboard/UserProfilePage.tsx b/web/src/pages/UserDashboard/UserProfilePage.tsx
index c3a9be3..57aea1c 100644
--- a/web/src/pages/UserDashboard/UserProfilePage.tsx
+++ b/web/src/pages/UserDashboard/UserProfilePage.tsx
@@ -14,6 +14,7 @@ import {
   Modal, // Import Modal
   ModalBody,
   ModalHeader,
+  Tooltip, // <-- Import Tooltip
 } from "flowbite-react";
 // Import necessary icons
 import {
@@ -24,6 +25,7 @@ import {
   HiX,
   HiTrash, // Import Trash icon for Delete
   HiExclamation, // Import Exclamation icon for Modal
+  HiInformationCircle, // <-- Import for Tooltip
 } from "react-icons/hi";
 import {
   useUserProfile,
@@ -41,6 +43,7 @@ type UserProfileFormData = {
   phone?: string;
   privacySettings_dataSharingConsent?: boolean;
   privacySettings_anonymizeData?: boolean;
+  privacySettings_allowInference?: boolean; // <-- Add allowInference
 };
 
 export default function UserProfilePage() {
@@ -80,6 +83,7 @@ export default function UserProfilePage() {
       phone: "",
       privacySettings_dataSharingConsent: false,
       privacySettings_anonymizeData: false,
+      privacySettings_allowInference: true, // <-- Default to true
     },
   });
 
@@ -93,6 +97,9 @@ export default function UserProfilePage() {
           userProfile.privacySettings?.dataSharingConsent ?? false,
         privacySettings_anonymizeData:
           userProfile.privacySettings?.anonymizeData ?? false,
+        // <-- Reset allowInference
+        privacySettings_allowInference:
+          userProfile.privacySettings?.allowInference ?? true, // Default true if undefined
       });
     }
   }, [userProfile, reset]);
@@ -156,8 +163,9 @@ export default function UserProfilePage() {
       username: data.username,
       phone: data.phone,
       privacySettings: {
-        dataSharingConsent: data.privacySettings_dataSharingConsent,
-        anonymizeData: data.privacySettings_anonymizeData,
+        dataSharingConsent: data.privacySettings_dataSharingConsent ?? false,
+        anonymizeData: data.privacySettings_anonymizeData ?? false,
+        allowInference: data.privacySettings_allowInference ?? false,
       },
     };
     updateUser(updatePayload);
@@ -303,29 +311,78 @@ export default function UserProfilePage() {
                 Privacy Settings
               </h2>
               {/* Data Sharing Consent */}
-              <Controller
-                name="privacySettings_dataSharingConsent"
-                control={control}
-                render={({ field }) => (
-                  <ToggleSwitch
-                    label="Allow Data Sharing with Stores"
-                    checked={field.value ?? false}
-                    onChange={field.onChange}
-                  />
-                )}
-              />
+              <div>
+                {" "}
+                {/* Wrap ToggleSwitch and HelperText */}
+                <Controller
+                  name="privacySettings_dataSharingConsent"
+                  control={control}
+                  render={({ field }) => (
+                    <ToggleSwitch
+                      label="Allow Data Sharing with Stores"
+                      checked={field.value ?? false}
+                      onChange={field.onChange}
+                      // REMOVE helperText prop from here
+                    />
+                  )}
+                />
+                {/* Add HelperText or simple div below */}
+                <div className="mt-1 flex items-center text-xs text-gray-500 dark:text-gray-400">
+                  Controls sharing preferences with specific stores.{" "}
+                  <Tooltip content="Manage which stores can access your anonymized preference data in the 'Sharing' tab.">
+                    <HiInformationCircle className="ml-1 h-4 w-4 cursor-help" />
+                  </Tooltip>
+                </div>
+              </div>
+
               {/* Anonymize Data */}
-              <Controller
-                name="privacySettings_anonymizeData"
-                control={control}
-                render={({ field }) => (
-                  <ToggleSwitch
-                    label="Anonymize Data Shared with Stores"
-                    checked={field.value ?? false}
-                    onChange={field.onChange}
-                  />
-                )}
-              />
+              <div>
+                {" "}
+                {/* Wrap ToggleSwitch and HelperText */}
+                <Controller
+                  name="privacySettings_anonymizeData"
+                  control={control}
+                  render={({ field }) => (
+                    <ToggleSwitch
+                      label="Anonymize Data Shared with Stores (Future Use)"
+                      checked={field.value ?? false}
+                      onChange={field.onChange}
+                      disabled // Keep disabled as it's future use
+                      // REMOVE helperText prop from here
+                    />
+                  )}
+                />
+                {/* Add HelperText or simple div below */}
+                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  This feature is not yet active.
+                </div>
+              </div>
+
+              {/* --- Allow Inference Toggle --- */}
+              <div>
+                {" "}
+                {/* Wrap ToggleSwitch and HelperText */}
+                <Controller
+                  name="privacySettings_allowInference" // <-- Use correct name
+                  control={control}
+                  render={({ field }) => (
+                    <ToggleSwitch
+                      label="Allow Demographic Inference"
+                      checked={field.value ?? true} // Default checked if undefined
+                      onChange={field.onChange}
+                      // REMOVE helperText prop from here
+                    />
+                  )}
+                />
+                {/* Add HelperText or simple div below */}
+                <div className="mt-1 flex items-center text-xs text-gray-500 dark:text-gray-400">
+                  Allow Tapiro to estimate demographic insights.{" "}
+                  <Tooltip content="Tapiro can estimate details like age group or interests based on your activity to improve personalization, even if you don't provide them directly. Disable this to prevent inference.">
+                    <HiInformationCircle className="ml-1 h-4 w-4 cursor-help" />
+                  </Tooltip>
+                </div>
+              </div>
+
               {/* Save Button - Common for all tabs within the form */}
               <Button
                 type="submit"
@@ -338,13 +395,13 @@ export default function UserProfilePage() {
                     <span className="pl-3">Saving...</span>
                   </>
                 ) : (
-                  "Save Changes"
+                  "Save Privacy Settings" // More specific label
                 )}
               </Button>
             </form>
           </TabItem>
 
-          {/* Security Tab */}
+          {/* Security Tab (Existing) */}
           <TabItem title="Security" icon={HiLockClosed}>
             <div className="flex flex-col gap-8 pt-4">
               {" "}

From 189af4e2cb1c61961d203fdf101114482c4a581c Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 04:41:35 +0530
Subject: [PATCH 18/21] Revert "feat: Add UserProfilePage route for user
 profile management"

This reverts commit 46421dd89ba7159c98f23af366e987753b36441c.
---
 web/src/main.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/web/src/main.tsx b/web/src/main.tsx
index 3483564..ebfc7f7 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -15,7 +15,6 @@ import { AuthProviderWrapper } from "./context/AuthContext";
 import PrivateRoute from "./components/auth/PrivateRoute";
 import NotFoundPage from "./pages/static/NotFoundPage";
 import StoreProfilePage from "./pages/StoreDashboard/StoreProfilePage";
-import UserProfilePage from "./pages/UserDashboard/UserProfilePage";
 
 const router = createBrowserRouter([
   {
@@ -46,10 +45,6 @@ const router = createBrowserRouter([
             path: "dashboard/user",
             element: <UserDashboard />,
           },
-          {
-            path: "profile/user",
-            element: <UserProfilePage />,
-          },
         ],
       },
       // --- Protected Store Routes ---

From b177bc9325d279e07295913a439e30c0e43bc3b9 Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 04:47:57 +0530
Subject: [PATCH 19/21] feat: Add allowInference field to privacy settings and
 update related components

---
 api-service/api/openapi.yaml                  |  4 --
 api-service/service/UserProfileService.js     |  4 --
 api-service/utils/dbSchemas.js                |  1 -
 web/src/api/types/data-contracts.ts           |  5 --
 .../pages/UserDashboard/UserProfilePage.tsx   | 49 +++++--------------
 5 files changed, 11 insertions(+), 52 deletions(-)

diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index 669daa4..2c3988b 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -916,10 +916,6 @@ components:
         dataSharingConsent:
           type: boolean
           description: User consent to share aggregated/anonymized data.
-        anonymizeData:
-          type: boolean
-          description: User preference to anonymize data where possible (future use).
-          default: false
         allowInference: # <-- Add allowInference here
           type: boolean
           description: Allow Tapiro to infer demographic data based on user activity.
diff --git a/api-service/service/UserProfileService.js b/api-service/service/UserProfileService.js
index 1959e8c..940d3cb 100644
--- a/api-service/service/UserProfileService.js
+++ b/api-service/service/UserProfileService.js
@@ -173,10 +173,6 @@ exports.updateUserProfile = async function (req, body) {
         updateData['privacySettings.dataSharingConsent'] = body.privacySettings.dataSharingConsent;
         privacySettingsChanged = true;
       }
-      if (body.privacySettings.anonymizeData !== undefined) {
-        updateData['privacySettings.anonymizeData'] = body.privacySettings.anonymizeData;
-        privacySettingsChanged = true;
-      }
       if (body.privacySettings.allowInference !== undefined) { // <-- Add check for allowInference
         updateData['privacySettings.allowInference'] = body.privacySettings.allowInference;
         privacySettingsChanged = true;
diff --git a/api-service/utils/dbSchemas.js b/api-service/utils/dbSchemas.js
index 780291e..b000021 100644
--- a/api-service/utils/dbSchemas.js
+++ b/api-service/utils/dbSchemas.js
@@ -146,7 +146,6 @@ const userSchema = {
           required: ['dataSharingConsent'],
           properties: {
             dataSharingConsent: { bsonType: 'bool' },
-            anonymizeData: { bsonType: 'bool' },
             allowInference: { // <-- Add new field
               bsonType: 'bool',
               description: 'Allow Tapiro to infer demographic data based on user activity (default: true)',
diff --git a/web/src/api/types/data-contracts.ts b/web/src/api/types/data-contracts.ts
index 7438d13..9c68958 100644
--- a/web/src/api/types/data-contracts.ts
+++ b/web/src/api/types/data-contracts.ts
@@ -40,11 +40,6 @@ export interface User {
 export interface PrivacySettings {
   /** User consent to share aggregated/anonymized data. */
   dataSharingConsent: boolean;
-  /**
-   * User preference to anonymize data where possible (future use).
-   * @default false
-   */
-  anonymizeData?: boolean;
   /**
    * Allow Tapiro to infer demographic data based on user activity.
    * @default true
diff --git a/web/src/pages/UserDashboard/UserProfilePage.tsx b/web/src/pages/UserDashboard/UserProfilePage.tsx
index 57aea1c..1eca662 100644
--- a/web/src/pages/UserDashboard/UserProfilePage.tsx
+++ b/web/src/pages/UserDashboard/UserProfilePage.tsx
@@ -42,7 +42,6 @@ type UserProfileFormData = {
   username?: string;
   phone?: string;
   privacySettings_dataSharingConsent?: boolean;
-  privacySettings_anonymizeData?: boolean;
   privacySettings_allowInference?: boolean; // <-- Add allowInference
 };
 
@@ -82,7 +81,6 @@ export default function UserProfilePage() {
       username: "",
       phone: "",
       privacySettings_dataSharingConsent: false,
-      privacySettings_anonymizeData: false,
       privacySettings_allowInference: true, // <-- Default to true
     },
   });
@@ -95,11 +93,8 @@ export default function UserProfilePage() {
         phone: userProfile.phone || "",
         privacySettings_dataSharingConsent:
           userProfile.privacySettings?.dataSharingConsent ?? false,
-        privacySettings_anonymizeData:
-          userProfile.privacySettings?.anonymizeData ?? false,
-        // <-- Reset allowInference
         privacySettings_allowInference:
-          userProfile.privacySettings?.allowInference ?? true, // Default true if undefined
+          userProfile.privacySettings?.allowInference ?? true,
       });
     }
   }, [userProfile, reset]);
@@ -164,8 +159,7 @@ export default function UserProfilePage() {
       phone: data.phone,
       privacySettings: {
         dataSharingConsent: data.privacySettings_dataSharingConsent ?? false,
-        anonymizeData: data.privacySettings_anonymizeData ?? false,
-        allowInference: data.privacySettings_allowInference ?? false,
+        allowInference: data.privacySettings_allowInference ?? true, // Default to true if undefined
       },
     };
     updateUser(updatePayload);
@@ -329,35 +323,12 @@ export default function UserProfilePage() {
                 {/* Add HelperText or simple div below */}
                 <div className="mt-1 flex items-center text-xs text-gray-500 dark:text-gray-400">
                   Controls sharing preferences with specific stores.{" "}
-                  <Tooltip content="Manage which stores can access your anonymized preference data in the 'Sharing' tab.">
-                    <HiInformationCircle className="ml-1 h-4 w-4 cursor-help" />
+                  <Tooltip content="Manage which specific stores you share data with on the 'Sharing' tab.">
+                    <HiInformationCircle className="ml-1 h-4 w-4 cursor-help text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300" />
                   </Tooltip>
                 </div>
               </div>
 
-              {/* Anonymize Data */}
-              <div>
-                {" "}
-                {/* Wrap ToggleSwitch and HelperText */}
-                <Controller
-                  name="privacySettings_anonymizeData"
-                  control={control}
-                  render={({ field }) => (
-                    <ToggleSwitch
-                      label="Anonymize Data Shared with Stores (Future Use)"
-                      checked={field.value ?? false}
-                      onChange={field.onChange}
-                      disabled // Keep disabled as it's future use
-                      // REMOVE helperText prop from here
-                    />
-                  )}
-                />
-                {/* Add HelperText or simple div below */}
-                <div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                  This feature is not yet active.
-                </div>
-              </div>
-
               {/* --- Allow Inference Toggle --- */}
               <div>
                 {" "}
@@ -368,7 +339,7 @@ export default function UserProfilePage() {
                   render={({ field }) => (
                     <ToggleSwitch
                       label="Allow Demographic Inference"
-                      checked={field.value ?? true} // Default checked if undefined
+                      checked={field.value ?? true} // Default checked state if undefined
                       onChange={field.onChange}
                       // REMOVE helperText prop from here
                     />
@@ -376,12 +347,14 @@ export default function UserProfilePage() {
                 />
                 {/* Add HelperText or simple div below */}
                 <div className="mt-1 flex items-center text-xs text-gray-500 dark:text-gray-400">
-                  Allow Tapiro to estimate demographic insights.{" "}
-                  <Tooltip content="Tapiro can estimate details like age group or interests based on your activity to improve personalization, even if you don't provide them directly. Disable this to prevent inference.">
-                    <HiInformationCircle className="ml-1 h-4 w-4 cursor-help" />
+                  Allow Tapiro to infer demographic insights based on your
+                  activity.{" "}
+                  <Tooltip content="Inferred insights (like potential interests or age group) help personalize recommendations. This data is not directly shared.">
+                    <HiInformationCircle className="ml-1 h-4 w-4 cursor-help text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300" />
                   </Tooltip>
                 </div>
               </div>
+              {/* --- End Allow Inference Toggle --- */}
 
               {/* Save Button - Common for all tabs within the form */}
               <Button
@@ -392,7 +365,7 @@ export default function UserProfilePage() {
                 {isUpdating ? (
                   <>
                     <Spinner size="sm" />
-                    <span className="pl-3">Saving...</span>
+                    <span className="pl-3">Saving Privacy Settings...</span>
                   </>
                 ) : (
                   "Save Privacy Settings" // More specific label

From 31c258ae7ac195c95f639f8de63a36dda1c68a2d Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 14:13:19 +0530
Subject: [PATCH 20/21] feat: Add allowInference field to data sharing consent
 schema in OpenAPI specification

---
 api-service/api/openapi.yaml | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index 2c3988b..93ebe0c 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -916,24 +916,12 @@ components:
         dataSharingConsent:
           type: boolean
           description: User consent to share aggregated/anonymized data.
-        allowInference: # <-- Add allowInference here
+        allowInference:
           type: boolean
           description: Allow Tapiro to infer demographic data based on user activity.
           default: true
-        optInStores:
-          type: array
-          items:
-            type: string
-            format: objectId # Assuming store IDs are ObjectIds represented as strings
-          description: List of store IDs the user explicitly allows data sharing with.
-        optOutStores:
-          type: array
-          items:
-            type: string
-            format: objectId # Assuming store IDs are ObjectIds represented as strings
-          description: List of store IDs the user explicitly blocks data sharing with.
       required:
-        - dataSharingConsent # Only this is strictly required on creation
+        - dataSharingConsent
 
     Store:
       type: object

From e5c73dcdc04bd5a83dc1f19384d065421fdb75c6 Mon Sep 17 00:00:00 2001
From: CDevmina <chamathdewmina25@gmail.com>
Date: Sun, 27 Apr 2025 14:54:17 +0530
Subject: [PATCH 21/21] feat: Enhance UserRegistrationForm with inference
 popover and update UserPreferencesPage button styles

---
 .../components/auth/UserRegistrationForm.tsx  | 25 +++++++++++++------
 .../UserDashboard/UserPreferencesPage.tsx     |  3 +--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/web/src/components/auth/UserRegistrationForm.tsx b/web/src/components/auth/UserRegistrationForm.tsx
index 41f1872..6975b77 100644
--- a/web/src/components/auth/UserRegistrationForm.tsx
+++ b/web/src/components/auth/UserRegistrationForm.tsx
@@ -8,9 +8,8 @@ import {
   ModalBody,
   ModalFooter,
   Popover,
-  Select, // Already imported
+  Select,
   TextInput,
-  Tooltip, // <-- Import ToggleSwitch if you prefer it over Checkbox
 } from "flowbite-react";
 import { UserCreate } from "../../api/types/data-contracts";
 import LoadingSpinner from "../common/LoadingSpinner";
@@ -114,6 +113,17 @@ export function UserRegistrationForm({
     setShowConsentModal(false);
   };
 
+  // Define content for the inference popover
+  const inferencePopoverContent = (
+    <div className="w-64 p-3 text-sm text-gray-500 dark:text-gray-400">
+      <p>
+        Tapiro can estimate demographic details like age group or interests
+        based on your activity to improve personalization, even if you don't
+        provide them directly. You can disable this anytime.
+      </p>
+    </div>
+  );
+
   const popoverContent = (
     <div className="w-64 p-3 text-sm text-gray-500 dark:text-gray-400">
       <p>
@@ -255,7 +265,6 @@ export function UserRegistrationForm({
 
           {/* --- Allow Inference Toggle --- */}
           <div className="flex items-center gap-2">
-            {/* Using Checkbox for consistency, but ToggleSwitch is also an option */}
             <Checkbox
               id="allow-inference"
               checked={allowInference}
@@ -263,12 +272,14 @@ export function UserRegistrationForm({
             />
             <Label
               htmlFor="allow-inference"
-              className="flex text-gray-700 dark:text-gray-300"
+              className="flex items-center text-gray-700 dark:text-gray-300" // Added items-center
             >
-              Allow Tapiro to infer demographic insights{" "}
-              <Tooltip content="Tapiro can estimate demographic details like age group or interests based on your activity to improve personalization, even if you don't provide them directly. You can disable this anytime.">
+              Allow Tapiro to infer demographic insights
+              {/* Replace Tooltip with Popover */}
+              <Popover content={inferencePopoverContent} trigger="hover">
+                {/* Icon is the trigger */}
                 <HiInformationCircle className="ml-1 h-4 w-4 cursor-help text-gray-400" />
-              </Tooltip>
+              </Popover>
             </Label>
           </div>
           {/* --- End Allow Inference Toggle --- */}
diff --git a/web/src/pages/UserDashboard/UserPreferencesPage.tsx b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
index 8412c0f..ea805c3 100644
--- a/web/src/pages/UserDashboard/UserPreferencesPage.tsx
+++ b/web/src/pages/UserDashboard/UserPreferencesPage.tsx
@@ -730,7 +730,7 @@ const UserPreferencesPage: React.FC = () => {
                   color="gray"
                   onClick={() => {
                     setIsEditingDemographics(false);
-                    resetDemoForm(); // Reset to original values on cancel
+                    resetDemoForm();
                   }}
                   disabled={isMutating}
                 >
@@ -738,7 +738,6 @@ const UserPreferencesPage: React.FC = () => {
                 </Button>
                 <Button
                   type="submit"
-                  color="success"
                   disabled={isUpdatingProfile || !isDemoDirty}
                 >
                   {isUpdatingProfile ? (