fix: correct depreciation labels, add counter-offer rows, fix NLP 0.00 display, fix ledger table layout

fairvalue-webapp/src/components/ReportTemplate.tsx

@@ -97,6 +97,10 @@ export const ReportTemplate = forwardRef<HTMLDivElement, ReportProps>(({ form, r
           AI Valuation Ledger
         </h2>
         <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px' }}>
+          <colgroup>
+            <col style={{ width: '70%' }} />
+            <col style={{ width: '30%' }} />
+          </colgroup>
           <tbody>
             <tr style={{ borderBottom: '1px solid #e2e8f0' }}>
               <td style={{ padding: '12px 0', color: '#475569', fontWeight: 500 }}>Intrinsic Performance Value</td>
@@ -104,10 +108,15 @@ export const ReportTemplate = forwardRef<HTMLDivElement, ReportProps>(({ form, r
             </tr>
             <tr style={{ borderBottom: '1px solid #e2e8f0' }}>
               <td style={{ padding: '12px 0', color: '#475569', fontWeight: 500 }}>
-                Age & Contract Impact (SHAP) — {L.depreciation < 0 ? 'Penalty' : 'Premium'}
+                Age &amp; Contract Impact (SHAP) — {L.depreciation > 0 ? '📉 Depreciation' : '📈 Appreciation'}
+                {L.depreciation > 0 && form.age <= 23 && (
+                  <div style={{ fontSize: '11px', color: '#94a3b8', marginTop: '2px' }}>
+                    * Model reflects current output, not future potential
+                  </div>
+                )}
               </td>
-              <td style={{ padding: '12px 0', textAlign: 'right', fontWeight: 700, color: L.depreciation < 0 ? '#ef4444' : '#22c55e' }}>
-                {L.depreciation >= 0 ? '+' : ''}£{L.depreciation.toFixed(1)}m
+              <td style={{ padding: '12px 0', textAlign: 'right', fontWeight: 700, color: L.depreciation > 0 ? '#ef4444' : '#22c55e' }}>
+                {L.depreciation > 0 ? '-' : '+'}£{Math.abs(L.depreciation).toFixed(1)}m
               </td>
             </tr>
             <tr style={{ borderBottom: '1px solid #e2e8f0' }}>
@@ -121,11 +130,27 @@ export const ReportTemplate = forwardRef<HTMLDivElement, ReportProps>(({ form, r
               </td>
             </tr>
             <tr style={{ backgroundColor: '#f0fdf4', border: '1px solid #bbf7d0' }}>
-              <td style={{ padding: '16px 12px', color: '#166534', fontWeight: 700, fontSize: '16px' }}>Calculated Fair Value</td>
+              <td style={{ padding: '16px 12px', color: '#166534', fontWeight: 700, fontSize: '16px' }}>Calculated Fair Value (Ceiling)</td>
               <td style={{ padding: '16px 12px', textAlign: 'right', fontWeight: 800, fontSize: '20px', color: '#16a34a' }}>
                 £{L.hard_cap.toFixed(1)}m
               </td>
             </tr>
+            <tr style={{ backgroundColor: '#fefce8', border: '1px solid #fde68a' }}>
+              <td style={{ padding: '12px 12px', color: '#92400e', fontWeight: 600, fontSize: '13px' }}>
+                🎯 Recommended Opening Bid
+              </td>
+              <td style={{ padding: '12px 12px', textAlign: 'right', fontWeight: 700, fontSize: '15px', color: '#b45309' }}>
+                £{(L.hard_cap * 0.85).toFixed(1)}m
+              </td>
+            </tr>
+            <tr style={{ backgroundColor: '#fff7ed', border: '1px solid #fed7aa' }}>
+              <td style={{ padding: '12px 12px', color: '#7c2d12', fontWeight: 600, fontSize: '13px' }}>
+                ⚠️ Walk-Away Ceiling
+              </td>
+              <td style={{ padding: '12px 12px', textAlign: 'right', fontWeight: 700, fontSize: '15px', color: '#dc2626' }}>
+                £{L.hard_cap.toFixed(1)}m
+              </td>
+            </tr>
           </tbody>
         </table>
       </div>
@@ -138,21 +163,21 @@ export const ReportTemplate = forwardRef<HTMLDivElement, ReportProps>(({ form, r
           </h2>
           <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '16px', background: '#f8fafc', padding: '24px', borderRadius: '12px', border: '1px solid #e2e8f0' }}>
             <div>
-              <div style={{ fontSize: '11px', color: '#64748b', textTransform: 'uppercase' }}>Recent Form & Impact</div>
-              <div style={{ fontSize: '18px', fontWeight: 700, color: result.nlp_results.recency < 0 ? '#ef4444' : '#22c55e' }}>
-                {result.nlp_results.recency > 0 ? '+' : ''}{result.nlp_results.recency.toFixed(2)}
+              <div style={{ fontSize: '11px', color: '#64748b', textTransform: 'uppercase' }}>Recent Form &amp; Impact</div>
+              <div style={{ fontSize: '18px', fontWeight: 700, color: (result.nlp_results?.recency ?? 0) === 0 ? '#94a3b8' : (result.nlp_results?.recency ?? 0) < 0 ? '#ef4444' : '#22c55e' }}>
+                {(result.nlp_results?.recency ?? 0) === 0 ? 'No signals detected' : `${(result.nlp_results?.recency ?? 0) > 0 ? '+' : ''}${(result.nlp_results?.recency ?? 0).toFixed(2)}`}
               </div>
             </div>
             <div>
               <div style={{ fontSize: '11px', color: '#64748b', textTransform: 'uppercase' }}>Injury / Availability</div>
-              <div style={{ fontSize: '18px', fontWeight: 700, color: result.nlp_results.durability < 0 ? '#ef4444' : '#0f172a' }}>
-                {result.nlp_results.durability > 0 ? '+' : ''}{result.nlp_results.durability.toFixed(2)}
+              <div style={{ fontSize: '18px', fontWeight: 700, color: (result.nlp_results?.durability ?? 0) === 0 ? '#94a3b8' : (result.nlp_results?.durability ?? 0) < 0 ? '#ef4444' : '#0f172a' }}>
+                {(result.nlp_results?.durability ?? 0) === 0 ? 'No signals detected' : `${(result.nlp_results?.durability ?? 0) > 0 ? '+' : ''}${(result.nlp_results?.durability ?? 0).toFixed(2)}`}
               </div>
             </div>
             <div>
               <div style={{ fontSize: '11px', color: '#64748b', textTransform: 'uppercase' }}>Transfer Speculation</div>
-              <div style={{ fontSize: '18px', fontWeight: 700, color: result.nlp_results.agent < 0 ? '#ef4444' : '#22c55e' }}>
-                {result.nlp_results.agent > 0 ? '+' : ''}{result.nlp_results.agent.toFixed(2)}
+              <div style={{ fontSize: '18px', fontWeight: 700, color: (result.nlp_results?.agent ?? 0) === 0 ? '#94a3b8' : (result.nlp_results?.agent ?? 0) < 0 ? '#ef4444' : '#22c55e' }}>
+                {(result.nlp_results?.agent ?? 0) === 0 ? 'No signals detected' : `${(result.nlp_results?.agent ?? 0) > 0 ? '+' : ''}${(result.nlp_results?.agent ?? 0).toFixed(2)}`}
               </div>
             </div>
           </div>
@@ -169,11 +194,16 @@ export const ReportTemplate = forwardRef<HTMLDivElement, ReportProps>(({ form, r
         </h2>
         <div style={{ padding: '24px', background: isOverpay ? '#fef2f2' : '#f0fdf4', border: `1px solid ${isOverpay ? '#fecaca' : '#bbf7d0'}`, borderRadius: '12px' }}>
           <p style={{ fontSize: '15px', color: isOverpay ? '#991b1b' : '#166534', lineHeight: 1.6, marginBottom: '16px' }}>
-            <strong>Negotiation Intel:</strong> Based on the real-time evaluation engine, {form.selected_name}'s intrinsic value sits at £{L.intrinsic_performance_value.toFixed(1)}m. 
-            Adjusting for age and contract dynamics (£{L.depreciation.toFixed(1)}m) and live market NLP sentiment (×{L.external_multiplier.toFixed(3)}), 
-            the absolute financial ceiling (Fair Value) is strictly calculated at <strong>£{L.hard_cap.toFixed(1)}m</strong>.
+            <strong>Negotiation Intel:</strong> Based on the real-time evaluation engine, {form.selected_name}'s intrinsic value sits at £{L.intrinsic_performance_value.toFixed(1)}m.
+            Age &amp; contract dynamics apply a {L.depreciation > 0 ? `depreciation of -£${Math.abs(L.depreciation).toFixed(1)}m` : `appreciation of +£${Math.abs(L.depreciation).toFixed(1)}m`},
+            with live NLP market sentiment at ×{L.external_multiplier.toFixed(3)}. The absolute financial ceiling (Fair Value) is <strong>£{L.hard_cap.toFixed(1)}m</strong>.
             <br/><br/>
-            <strong>Validation:</strong> {result.nlp_results.recency > 0 ? "Player's recent form commands a premium in the market." : "Recent form is suboptimal, creating leverage for a lower fee."} {L.depreciation < 0 ? "Age profile indicates significant depreciation risk—use this to negotiate down." : "Player's age and contract profile guarantees long-term asset retention, justifying a premium."}
+            <strong>Validation:</strong> {(result.nlp_results?.recency ?? 0) > 0 ? "Player's recent form commands a market premium." : "Recent form is suboptimal — leverage this to negotiate a lower fee."} {L.depreciation > 0 ? `Age & contract profile adds £${Math.abs(L.depreciation).toFixed(1)}m in depreciation risk — use this as a negotiation lever.` : `Young age and contract security add £${Math.abs(L.depreciation).toFixed(1)}m in appreciation value, justifying a strong offer.`}
+            {L.depreciation > 0 && form.age <= 23 && (
+              <span style={{ display: 'block', marginTop: '8px', fontSize: '12px', color: '#64748b' }}>
+                ℹ️ Note: Depreciation reflects the player's current statistical output stage vs. their peak. Young players may command a future-value premium not captured in this model.
+              </span>
+            )}
           </p>
           <div style={{ fontSize: '18px', fontWeight: 800, color: isOverpay ? '#dc2626' : '#16a34a', borderTop: `1px solid ${isOverpay ? '#fca5a5' : '#86efac'}`, paddingTop: '16px' }}>
             VERDICT: {isOverpay ? 'OVERPAY RISK' : 'FAIR DEAL - PROCEED WITH CONFIDENCE'}

fairvalue-webapp/src/pages/Estimator.tsx

@@ -221,13 +221,8 @@ export default function Estimator() {
     
     // Auto-Format the Player Name so the PDF always looks professional
     let cleanName = form.selected_name.trim()
-    const exactMatch = suggestions.find(s => s.toLowerCase() === cleanName.toLowerCase())
-    if (exactMatch) {
-      cleanName = exactMatch // Snap to exact database spelling
-    } else {
-      // Apply Title Case for new/unrecognized players (e.g. "john doe" -> "John Doe")
-      cleanName = cleanName.replace(/\b\w/g, c => c.toUpperCase())
-    }
+    // Apply Title Case for unrecognized players (e.g. "john doe" -> "John Doe")
+    cleanName = cleanName.replace(/\b\w/g, c => c.toUpperCase())
     
     if (cleanName !== form.selected_name) {
       setForm(prev => ({ ...prev, selected_name: cleanName }))
@@ -255,9 +250,20 @@ export default function Estimator() {
     }
   }
 
-  const handleDownloadPdf = async () => {
-    // Rely on native browser print for high-fidelity vectorized PDFs
+  const handleDownloadPdf = () => {
+    // Temporarily change document title so the native Print/Save dialog
+    // automatically uses this as the default PDF file name.
+    const originalTitle = document.title
+    const safeName = form.selected_name.replace(/\s+/g, '_') || 'Player'
+    document.title = `FairValue_Report_${safeName}`
+    
+    // Rely on native browser print for high-fidelity, copyable vectorized PDFs
     window.print()
+    
+    // Restore the original title after the print dialog resolves
+    setTimeout(() => {
+      document.title = originalTitle
+    }, 1000)
   }
 
   const L = result?.ledger
@@ -410,10 +416,15 @@ export default function Estimator() {
                       ? `⚠️ OVERPAY RISK — Asking price £${form.asking_price}m exceeds our Fair Value ceiling of £${L.hard_cap.toFixed(1)}m by £${(form.asking_price - L.hard_cap).toFixed(1)}m.`
                       : `✅ FAIR DEAL — Asking price £${form.asking_price}m is within the £${L.hard_cap.toFixed(1)}m Fair Value. Proceed with confidence.`}
                   </div>
-                  <button onClick={handleDownloadPdf} className="btn btn-secondary" style={{ padding: '0 24px' }} title="Download Professional PDF Report">
-                    <Download size={20} />
-                    Download Report
-                  </button>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                    <button onClick={handleDownloadPdf} className="btn btn-secondary" style={{ padding: '0 24px' }} title="Download Professional PDF Report">
+                      <Download size={20} />
+                      Download PDF Report
+                    </button>
+                    <span style={{ fontSize: '0.68rem', color: 'var(--text-2)', textAlign: 'center', lineHeight: 1.4 }}>
+                      💡 In the print dialog, set <strong style={{ color: 'var(--text-1)' }}>Destination → Save as PDF</strong>
+                    </span>
+                  </div>
                 </div>
 
                 {/* Gauge + Ledger */}
@@ -432,9 +443,9 @@ export default function Estimator() {
                       </div>
                       <div className="divider" style={{ margin:'8px 0' }}/>
                       <div>
-                        <div className="metric-label">Age & Contract Impact — {L.depreciation < 0 ? 'Penalty' : 'Premium'}</div>
-                        <div className="metric-value" style={{ color: L.depreciation < 0 ? 'var(--loss-color)' : 'var(--profit-color)' }}>
-                          {L.depreciation >= 0 ? '+' : ''}£{L.depreciation.toFixed(1)}m
+                        <div className="metric-label">Age &amp; Contract Impact &mdash; {L.depreciation > 0 ? '📉 Depreciation' : '📈 Appreciation'}</div>
+                        <div className="metric-value" style={{ color: L.depreciation > 0 ? 'var(--loss-color)' : 'var(--profit-color)' }}>
+                          {L.depreciation > 0 ? '-' : '+'}£{Math.abs(L.depreciation).toFixed(1)}m
                         </div>
                         <span className="badge badge-blue" style={{ marginTop:4 }}>SHAP Calculated</span>
                       </div>