Twilio bash config added. Milestone Panel edits.

package-lock.json

@@ -36,6 +36,7 @@
         "moment": "^2.30.1",
         "multer": "^1.4.5-lts.2",
         "mysql2": "^3.14.1",
+        "node-cron": "^4.1.0",
         "openai": "^4.97.0",
         "pdf-parse": "^1.1.1",
         "pdfjs-dist": "^3.11.174",
@@ -51,6 +52,7 @@
         "sqlite3": "^5.1.7",
         "tailwind-merge": "^3.2.0",
         "tailwindcss-animate": "^1.0.7",
+        "twilio": "^5.7.1",
         "web-vitals": "^4.2.4",
         "xlsx": "^0.18.5"
       },
@@ -7491,6 +7493,12 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -13476,6 +13484,15 @@
       "integrity": "sha512-eh0GgfEkpnoWDq+VY8OyvYhFEzBk6jIYbRKdIlyTiAXIVJ8PyBaKb0rp7oDtoddbdoHWhq8wwr+XZ81F1rpNdA==",
       "license": "MIT"
     },
+    "node_modules/node-cron": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.1.0.tgz",
+      "integrity": "sha512-OS+3ORu+h03/haS6Di8Qr7CrVs4YaKZZOynZwQpyPZDnR3tqRbwJmuP2gVR16JfhLgyNlloAV1VTrrWlRogCFA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/node-domexception": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
@@ -17185,6 +17202,12 @@
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "license": "MIT"
     },
+    "node_modules/scmp": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/scmp/-/scmp-2.1.0.tgz",
+      "integrity": "sha512-o/mRQGk9Rcer/jEEw/yw4mwo3EU/NvYvp577/Btqrym9Qy5/MdWGBqipbALgd2lrdWTJ5/gqDusxfnQBxOxT2Q==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -19068,6 +19091,33 @@
       "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
       "license": "ISC"
     },
+    "node_modules/twilio": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/twilio/-/twilio-5.7.1.tgz",
+      "integrity": "sha512-BcoVK6FR580HRX94z2u3b+foHkvFj39DDzLU4Xv+N/7ejDIGgQdrtg7CgRqIT04UNs98HJAvjuAOzkYetI6ExQ==",
+      "license": "MIT",
+      "dependencies": {
+        "axios": "^1.8.3",
+        "dayjs": "^1.11.9",
+        "https-proxy-agent": "^5.0.0",
+        "jsonwebtoken": "^9.0.2",
+        "qs": "^6.9.4",
+        "scmp": "^2.1.0",
+        "xmlbuilder": "^13.0.2"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
+    "node_modules/twilio/node_modules/xmlbuilder": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz",
+      "integrity": "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "moment": "^2.30.1",
     "multer": "^1.4.5-lts.2",
     "mysql2": "^3.14.1",
+    "node-cron": "^4.1.0",
     "openai": "^4.97.0",
     "pdf-parse": "^1.1.1",
     "pdfjs-dist": "^3.11.174",
@@ -46,6 +47,7 @@
     "sqlite3": "^5.1.7",
     "tailwind-merge": "^3.2.0",
     "tailwindcss-animate": "^1.0.7",
+    "twilio": "^5.7.1",
     "web-vitals": "^4.2.4",
     "xlsx": "^0.18.5"
   },

src/components/CareerRoadmap.js

@@ -32,6 +32,7 @@ import { Button } from './ui/button.js';
 import { Pencil } from 'lucide-react';
 import ScenarioEditModal from './ScenarioEditModal.js';
 import parseAIJson from "../utils/parseAIJson.js"; // your shared parser
+import InfoTooltip from "./ui/infoTooltip.js";
 
 import './CareerRoadmap.css';
 import './MilestoneTimeline.css';
@@ -1336,7 +1337,10 @@ const fetchMilestones = useCallback(async () => {
 
       {/* --- FINANCIAL PROJECTION SECTION -------------------------------- */}
         <div className="bg-white p-4 rounded shadow">
-          <h3 className="text-lg font-semibold mb-2">Financial Projection</h3>
+          <h3 className="text-lg font-semibold mb-2 flex items-center justify-center gap-1">
+            Financial Projection
+            <InfoTooltip message="This projection uses the salary, expense, loan and contribution inputs you’ve set below. Click “Edit Simulation Inputs” to adjust them, or edit your financial information in Profile -> Financial Profile." />
+          </h3>
 
 
           {projectionData.length ? (

src/components/MilestonePanel.js

@@ -1,40 +1,42 @@
-import { Pencil } from 'lucide-react';
+/* MilestonePanel.jsx */
-import { Button } from './ui/button.js';
+import { Pencil } from "lucide-react";
+import { Button } from "./ui/button.js";
 
-
-/* MilestonePanel.jsx ---------------------------------- */
 export default function MilestonePanel({ groups, onEdit, onSelect }) {
   return (
-    <aside className="w-full pr-4">
+    <aside className="w-full md:max-w-md mx-auto">   {/*  max-width ≈ 28 rem  */}
-      {groups.map(g => (
+
-        <details key={g.month} className="mb-2">
+      {groups.map((g) => (
-          <summary className="cursor-pointer font-semibold">
+        <details key={g.month} className="mb-3">
-            {g.monthLabel} <span className="text-xs">({g.items.length})</span>
+          <summary className="cursor-pointer font-semibold flex items-center gap-1">
+            {g.monthLabel}
+            <span className="text-xs text-gray-500">({g.items.length})</span>
           </summary>
 
-          <ul className="mt-1 space-y-2">
+          <ul className="mt-2 space-y-1 pl-4">
-            {g.items.map(m => (
+            {g.items.map((m) => (
               <li
                 key={m.id}
-                className="flex items-start justify-between text-sm group cursor-pointer"
+                className="grid grid-cols-[1fr_auto] items-center gap-4 pr-2
-                onClick={() => onSelect?.(m)}             
+                          hover:bg-gray-50 rounded cursor-pointer"
+                onClick={() => onSelect(m)}                 
               >
-                <span>{m.title}</span>
+                <span className="truncate">{m.title}</span>
 
-                {/* edit pencil – invisible until row hover */}
                 <Button
-                  size="icon"
+                  onClick={(e) => {                        {/* stop click bubbling so pencil still edits */}
-                  variant="ghost"
+                    e.stopPropagation();
-                  className="opacity-0 group-hover:opacity-75 transition-opacity"
-                  onClick={e => {
-                    e.stopPropagation();                  // don’t also open drawer
                     onEdit(m);
                   }}
+                  size="icon"
+                  variant="ghost"
+                  className="text-blue-600 hover:bg-blue-50"
+                  aria-label="Edit milestone"
                 >
-                  <Pencil className="h-4 w-4 text-gray-500 hover:text-gray-700" />
+                  <Pencil className="w-4 h-4" />
-                  <span className="sr-only">Edit milestone</span>
                 </Button>
               </li>
+
             ))}
           </ul>
         </details>