From 261f5c41848f5ef813a8dbe236307e2a71c070ad Mon Sep 17 00:00:00 2001
From: Manohar Gupta <manohar@manohargupta.com>
Date: Sat, 23 May 2026 18:13:08 +0530
Subject: [PATCH] Fix file preview and button interaction

---
 packages/web/components/ProfileViewer.tsx | 139 +++++++++++-----------
 1 file changed, 72 insertions(+), 67 deletions(-)

diff --git a/packages/web/components/ProfileViewer.tsx b/packages/web/components/ProfileViewer.tsx
index 8eb01ef..8abacc2 100644
--- a/packages/web/components/ProfileViewer.tsx
+++ b/packages/web/components/ProfileViewer.tsx
@@ -367,10 +367,66 @@ export function ProfileViewer() {
 
             {/* Content */}
             <div className="flex-1 overflow-y-auto p-4">
-              {/* Bundled profiles section */}
+              {/* File preview section - ALWAYS SHOWS when file is selected */}
+              {selectedFile ? (
+                <div className="mb-6 border rounded-lg overflow-hidden bg-background">
+                  <div className="flex items-center justify-between p-4 bg-blue-50 border-b">
+                    <div className="flex items-center gap-3">
+                      <span className="text-2xl">{selectedFile.name.includes('Solar') ? '☀️' : '💨'}</span>
+                      <div>
+                        <h3 className="text-base font-semibold">{selectedFile.name}</h3>
+                        <p className="text-xs text-muted-foreground">{selectedFile.data.length} rows of data</p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <a
+                        href={`${typeof window !== 'undefined' ? (window as any).NEXT_PUBLIC_API_URL || 'http://localhost:8000' : 'http://localhost:8000'}${selectedFile.path}?as_csv=true`}
+                        download
+                        className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded hover:bg-primary/90"
+                      >
+                        Download CSV
+                      </a>
+                      <button
+                        onClick={() => setSelectedFile(null)}
+                        className="px-3 py-1.5 text-sm border rounded hover:bg-accent"
+                      >
+                        Close Preview
+                      </button>
+                    </div>
+                  </div>
+                  <div className="max-h-[400px] overflow-auto bg-background">
+                    <table className="w-full text-xs">
+                      <thead className="bg-muted border-b sticky top-0">
+                        <tr>
+                          <th className="px-4 py-3 text-left font-semibold text-muted-foreground">Hour</th>
+                          <th className="px-4 py-3 text-left font-semibold text-muted-foreground">Date</th>
+                          <th className="px-4 py-3 text-left font-semibold text-muted-foreground">Month</th>
+                          <th className="px-4 py-3 text-left font-semibold text-muted-foreground">Day</th>
+                          <th className="px-4 py-3 text-left font-semibold text-muted-foreground">Hour of Day</th>
+                          <th className="px-4 py-3 text-right font-semibold text-muted-foreground">% Generation</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {selectedFile.data.map((row: string[], i: number) => (
+                          <tr key={i} className="border-b border-border/30 hover:bg-blue-50/50">
+                            <td className="px-4 py-2 font-medium">{row[0]}</td>
+                            <td className="px-4 py-2">{row[1]}</td>
+                            <td className="px-4 py-2">{row[2]}</td>
+                            <td className="px-4 py-2">{row[3]}</td>
+                            <td className="px-4 py-2">{row[4]}</td>
+                            <td className="px-4 py-2 text-right font-semibold text-blue-600">{row[5]}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-6">
+              {/* Bundled profiles section - shown when no file selected */}
               <div className="mb-6">
-                <h3 className="text-sm font-medium mb-3 text-muted-foreground">Bundled Reference Files</h3>
-                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+                <h3 className="text-sm font-semibold mb-4 text-foreground">📂 Click on any file below to view its contents:</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                   {[
                     { name: "Solar - Gujarat", path: "/api/profiles/solar/GJ", type: "solar", id: "solar_gj" },
                     { name: "Solar - Karnataka", path: "/api/profiles/solar/KA", type: "solar", id: "solar_ka" },
@@ -382,76 +438,24 @@ export function ProfileViewer() {
                     <button
                       key={profile.id}
                       onClick={() => fetchAndDisplayFile(profile.path, profile.name)}
-                      className="flex items-center gap-2 p-3 border rounded-lg hover:bg-accent transition-colors text-left"
+                      className="flex items-center gap-3 p-4 border-2 border-dashed border-border rounded-xl hover:border-primary hover:bg-primary/5 transition-all cursor-pointer text-left group"
+                      style={{ cursor: 'pointer' }}
                     >
-                      <span className="text-lg">{profile.type === "solar" ? "☀️" : "💨"}</span>
+                      <span className="text-2xl group-hover:scale-110 transition-transform">{profile.type === "solar" ? "☀️" : "💨"}</span>
                       <div className="flex-1">
-                        <div className="text-sm font-medium">{profile.name}</div>
-                        <div className="text-xs text-muted-foreground">8760 hourly values</div>
+                        <div className="text-sm font-semibold group-hover:text-primary transition-colors">{profile.name}</div>
+                        <div className="text-xs text-muted-foreground mt-1">Click to view 8760 hourly values</div>
+                      </div>
+                      <div className="px-2 py-1 bg-primary/10 rounded text-xs font-medium text-primary group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
+                        VIEW →
                       </div>
-                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
-                        <circle cx="12" cy="12" r="3" />
-                      </svg>
                     </button>
                   ))}
                 </div>
               </div>
 
-              {/* File preview section */}
-              {selectedFile && (
-                <div className="mb-6 border rounded-lg overflow-hidden">
-                  <div className="flex items-center justify-between p-3 bg-muted/50 border-b sticky top-0 z-10">
-                    <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium">{selectedFile.name}</span>
-                      <span className="text-xs text-muted-foreground">({selectedFile.data.length} rows)</span>
-                    </div>
-                    <div className="flex items-center gap-2">
-                      <a
-                        href={`${typeof window !== 'undefined' ? (window as any).NEXT_PUBLIC_API_URL || 'http://localhost:8000' : 'http://localhost:8000'}${selectedFile.path}?as_csv=true`}
-                        download
-                        className="px-2 py-1 text-xs border rounded hover:bg-accent"
-                      >
-                        Download CSV
-                      </a>
-                      <button
-                        onClick={() => setSelectedFile(null)}
-                        className="px-2 py-1 text-xs border rounded hover:bg-accent"
-                      >
-                        Close
-                      </button>
-                    </div>
-                  </div>
-                  <div className="max-h-[500px] overflow-auto">
-                    <table className="w-full text-xs">
-                      <thead className="bg-muted/50 sticky top-0">
-                        <tr>
-                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Hour</th>
-                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Date</th>
-                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Month</th>
-                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Day</th>
-                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Hour of Day</th>
-                          <th className="px-3 py-2 text-right font-medium text-muted-foreground">% Generation</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {selectedFile.data.map((row: string[], i: number) => (
-                          <tr key={i} className="border-t border-border/50 hover:bg-accent/30">
-                            <td className="px-3 py-1">{row[0]}</td>
-                            <td className="px-3 py-1">{row[1]}</td>
-                            <td className="px-3 py-1">{row[2]}</td>
-                            <td className="px-3 py-1">{row[3]}</td>
-                            <td className="px-3 py-1">{row[4]}</td>
-                            <td className="px-3 py-1 text-right tabular-nums">{row[5]}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              )}
-
-              {activeTab === "solar" && (
+              {/* Charts section - hidden when file is selected */}
+              {!selectedFile && activeTab === "solar" && (
                 <div className="space-y-6">
                   <div>
                     <h3 className="text-sm font-medium mb-3 text-muted-foreground">
@@ -568,7 +572,7 @@ export function ProfileViewer() {
                 </div>
               )}
 
-              {activeTab === "compare" && (
+              {!selectedFile && activeTab === "compare" && (
                 <div className="space-y-6">
                   <div>
                     <h3 className="text-sm font-medium mb-3 text-muted-foreground">
@@ -619,10 +623,11 @@ export function ProfileViewer() {
                   )}
                 </div>
               )}
+              </div>
             </div>
           </div>
         </div>
       )}
     </>
   );
-}
\ No newline at end of file
+}