fixing some minor bugs

src/app/portfolio/[slug]/(portfolio)/your-projects/live/LiveTracker.tsx

@@ -186,12 +186,16 @@ export default function LiveTracker({
 
       {/* 🔹 Table Modal */}
       {openTable && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-md transition-opacity">
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-md transition-opacity"
+          onClick={() => setOpenTable(null)}
+        >
           <motion.div
             initial={{ opacity: 0, scale: 0.95 }}
             animate={{ opacity: 1, scale: 1 }}
             transition={{ duration: 0.2 }}
             className="bg-white rounded-2xl shadow-2xl p-8 w-full max-w-6xl h-[90vh] flex flex-col border border-brandblue/10"
+            onClick={(e) => e.stopPropagation()}
           >
             <div className="mb-6 border-b border-brandblue/10 pb-6">
               <h2 className="text-2xl font-bold text-brandblue mb-3">
@@ -261,7 +265,10 @@ export default function LiveTracker({
 
             <div className="mt-6 flex justify-end gap-3">
               <button
-                onClick={() => setOpenTable(null)}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setOpenTable(null);
+                }}
                 className="px-6 py-2.5 bg-gradient-to-r from-brandblue to-brandmidblue text-white font-medium rounded-lg hover:shadow-md transition-all duration-200 hover:opacity-90"
               >
                 Close

src/app/portfolio/[slug]/(portfolio)/your-projects/live/ProgressOverview.tsx

@@ -37,7 +37,7 @@ export default function ProgressOverview({
   const strokeDashoffset = circumference - (completedPercentage / 100) * circumference;
 
   const handleCompletedClick = () => {
-    if (onOpenTable && data.completedDeals.length > 0) {
+    if (onOpenTable) {
       onOpenTable(
         "Completed Properties",
         data.completedDeals,
@@ -189,6 +189,67 @@ export default function ProgressOverview({
         </Card>
       </motion.button>
 
+      {/* Early Stage Cards - Scope, Booking, Assessment */}
+      {(() => {
+        const earlyStages = [
+          "Scope & Planning",
+          "Booking in Progress",
+          "Assessment in Progress",
+        ];
+        const earlyStageItems = data.stageProgress.filter((s) =>
+          earlyStages.includes(s.stage)
+        );
+
+        return earlyStageItems.length > 0 ? (
+          <div className="grid grid-cols-3 gap-3">
+            {earlyStageItems.map((item) => (
+              <motion.button
+                key={item.stage}
+                onClick={() => {
+                  if (onOpenTable) {
+                    onOpenTable(
+                      item.stage,
+                      item.deals,
+                      ["dealname", "landlordPropertyId"],
+                      {
+                        dealname: "Address Ref.",
+                        landlordPropertyId: "Property Ref.",
+                      }
+                    );
+                  }
+                }}
+                whileHover={{ scale: 1.02 }}
+                className="group relative text-left"
+              >
+                <Card className="bg-gradient-to-br from-blue-50/80 to-blue-50/40 border-2 border-blue-300/60 rounded-xl shadow-sm hover:shadow-md transition-all duration-300 p-4 hover:border-blue-400 h-full flex flex-col">
+                  <div className="space-y-3 flex-1 flex flex-col justify-between">
+                    <div>
+                      <p className="text-sm font-semibold text-blue-900 uppercase tracking-wide mb-1">
+                        {item.stage}
+                      </p>
+                      <p className="text-2xl font-bold text-blue-700">
+                        {item.count}
+                      </p>
+                    </div>
+
+                    <div className="border-t border-blue-200/50 pt-3">
+                      <p className="text-xs text-blue-600 font-semibold">
+                        {item.percentage.toFixed(0)}% of total
+                      </p>
+                    </div>
+
+                    <div className="flex items-center gap-2 text-blue-600 group-hover:text-blue-800 transition-colors">
+                      <span className="text-xs font-semibold">View</span>
+                      <span className="text-sm">→</span>
+                    </div>
+                  </div>
+                </Card>
+              </motion.button>
+            ))}
+          </div>
+        ) : null;
+      })()}
+
       {/* Project Summary Cards - Coordination & Design */}
       <div className="grid grid-cols-2 gap-3">
         <ExpandableCountBar