fix table no show bug

Author: Nancy Zhang

index.html

@@ -8,49 +8,49 @@
   <link rel="icon" href="./icons/icon-192.png" />
   <style>
     :root{--bg:#f7fafc;--card:#fff;--ink:#0f172a;--muted:#64748b;--ring:#6366f1;--border:#e2e8f0;--chip:#eef2ff}
-    *{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(#fafafa,#fff)}
-    header{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:16px 20px}
-    h1{font-size:20px;margin:0;color:var(--ink)}
-    .btn{border:1px solid var(--border);background:#fff;border-radius:12px;padding:8px 12px;cursor:pointer}
+    *{box-sizing:border-box}
+    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(#fafafa,#fff)}
+    header{display:flex;gap:12px;align-items:center;justify-content:flex-end;padding:8px 12px}
+    .btn{border:1px solid var(--border);background:#fff;border-radius:10px;padding:6px 10px;cursor:pointer;font-size:12px}
+    .btn.icon{display:inline-grid;place-items:center;padding:6px;width:30px;height:30px}
     .btn:focus{outline:2px solid var(--ring)}
-    .btn.icon{display:inline-grid;place-items:center;padding:8px;width:36px;height:36px}
-    .wrap{max-width:1200px;margin:0 auto;padding:0 16px 24px}
-    .tabs{display:flex;gap:8px;border-bottom:1px solid var(--border);margin:0 16px}
-    .tab{padding:10px 12px;border:1px solid var(--border);border-bottom:none;border-radius:12px 12px 0 0;background:#fff;cursor:pointer}
+
+    .wrap{max-width:1200px;margin:0 auto;padding:0 12px 16px}
+    .tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin:0 8px}
+    .tab{padding:8px 10px;border:1px solid var(--border);border-bottom:none;border-radius:10px 10px 0 0;background:#fff;cursor:pointer;font-size:13px}
     .tab[aria-selected="true"]{background:var(--chip)}
-    .panel{$1 overflow:auto}
-    .toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
-    .range{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+    .panel{border:1px solid var(--border);border-radius:14px;padding:12px;background:#fff;margin:0 8px;overflow:auto}
+
+    .toolbar{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}
     .grid{display:grid;grid-template-columns:repeat(7,220px);gap:10px}
-    .calendar-shell{border:1px solid var(--border);border-radius:16px;padding:12px;width:fit-content;}
-    .day{min-height:160px;border:1px solid var(--border);border-radius:16px;padding:10px;background:#fff;display:flex;flex-direction:column}
+    .calendar-shell{display:inline-block;border:1px solid var(--border);border-radius:14px;padding:10px;background:#fff}
+
+    .day{min-height:170px;border:1px solid var(--border);border-radius:12px;padding:8px;background:#fff;display:flex;flex-direction:column}
     .day.today{outline:2px solid var(--ring)}
     .daytop{display:flex;align-items:baseline;justify-content:space-between}
     .muted{color:var(--muted)}
-    .list{margin-top:8px;display:flex;flex-direction:column;gap:6px;overflow:auto}
-    .entry{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:8px}
+    .list{margin-top:6px;display:flex;flex-direction:column;gap:6px;overflow:auto}
+    .entry{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:6px}
     .dot{width:10px;height:10px;border-radius:999px;flex:0 0 10px;border:1px solid #0002}
     .grow{flex:1}
     .small{font-size:12px}
+
     .projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
     label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
     input,select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:10px}
     .row{display:flex;gap:10px;align-items:end}
     .row>*{flex:1}
     .tag{display:inline-flex;gap:8px;align-items:center}
-    .chip{background:var(--chip);border-radius:999px;padding:2px 8px}
     .right{margin-left:auto}
     .footer{display:flex;gap:8px;justify-content:flex-end}
     .hidden{display:none}
   </style>
 </head>
 <body>
   <header>
-    <div style="display:flex; gap:8px; margin-left:auto">
-      <button class="btn small" id="btnExport" title="Export JSON">⬇︎</button>
-      <label class="btn small" for="importFile" title="Import JSON">⬆︎</label>
-      <input id="importFile" type="file" accept="application/json" class="hidden" />
-    </div>
+    <button class="btn icon" id="btnExport" title="Export JSON">⬇︎</button>
+    <label class="btn icon" for="importFile" title="Import JSON">⬆︎</label>
+    <input id="importFile" type="file" accept="application/json" class="hidden" />
   </header>
 
   <div class="wrap">
@@ -64,12 +64,11 @@
     <section id="panelCal" class="panel" role="tabpanel" aria-labelledby="tabCal">
       <div class="toolbar">
         <div style="display:flex;gap:8px;align-items:center">
-          <button class="btn icon" id="prev">◀</button>
-          <button class="btn icon" id="next">▶</button>
+          <button class="btn icon" id="prev" title="Previous week">◀</button>
+          <button class="btn icon" id="next" title="Next week">▶</button>
           <button class="btn" id="btnToday">This ISO Week</button>
-          <span class="muted" id="rangeText"></span>
+          <span class="muted small" id="rangeText"></span>
         </div>
-        <button class="btn" id="addEntryOpen">Add Entry</button>
       </div>
       <div class="calendar-shell">
         <div class="grid" id="calGrid"></div>
@@ -114,7 +113,7 @@
     </section>
   </div>
 
-  <!-- Add/Edit Entry Modal (very small vanilla modal) -->
+  <!-- Add/Edit Entry Modal -->
   <dialog id="entryDialog" style="border:none;border-radius:16px;padding:16px;max-width:420px;width:90vw">
     <h3 style="margin:0 0 8px">Add Time Entry</h3>
     <div class="row">
@@ -145,7 +144,7 @@ <h3 style="margin:0 0 8px">Add Time Entry</h3>
 
   <script>
   // ===== Data Types & Storage =====
-  const STORAGE_KEY = 'smart-calendar-vanilla-v1';
+  const STORAGE_KEY = 'smart-calendar-vanilla-v2';
   /** @type {{projects: {id:string,name:string,color:string}[], entries: {id:string,date:string,projectId:string,hours:number,note?:string}[]}} */
   let db = loadDB();
 
@@ -190,14 +189,14 @@ <h3 style="margin:0 0 8px">Add Time Entry</h3>
   function parseYMD(s){ const [y,m,da]=s.split('-').map(Number); return new Date(Date.UTC(y,m-1,da)); }
   function humanDate(d){ return d.toLocaleDateString(undefined,{weekday:'short', month:'short', day:'numeric'}); }
 
-  // ===== State & Elements =====
+  // ===== Elements =====
   let anchor = startOfISOWeek(new Date());
   const calGrid = document.getElementById('calGrid');
   const rangeText = document.getElementById('rangeText');
   const btnPrev = document.getElementById('prev');
   const btnNext = document.getElementById('next');
   const btnToday = document.getElementById('btnToday');
-  const addEntryOpen = document.getElementById('addEntryOpen');
+  const addEntryOpen = document.getElementById('addEntryOpen'); // optional (not shown now)
   const entryDialog = document.getElementById('entryDialog');
   const dlgDate = document.getElementById('dlgDate');
   const dlgHours = document.getElementById('dlgHours');
@@ -222,11 +221,12 @@ <h3 style="margin:0 0 8px">Add Time Entry</h3>
       t.setAttribute('aria-selected', sel?'true':'false');
     }
   }
+
   tabCal.onclick = ()=> showPanel('cal');
   tabTotals.onclick = ()=> { showPanel('totals'); renderTotals(); };
   tabProj.onclick = ()=> { showPanel('proj'); renderProjects(); };
 
-  // ===== Calendar Rendering =====
+  // ===== Calendar =====
   function entriesByDate(){
     const m = {};
     for(const e of db.entries){ (m[e.date] ||= []).push(e); }
@@ -241,8 +241,9 @@ <h3 style="margin:0 0 8px">Add Time Entry</h3>
   }
 
   function renderCalendar(){
+    if(!calGrid) return;
     const days = twoWeek();
-    rangeText.textContent = humanDate(days[0]) + ' – ' + humanDate(days[13]);
+    if(rangeText) rangeText.textContent = humanDate(days[0]) + ' – ' + humanDate(days[13]);
     const map = entriesByDate();
     const pmap = projectById();
     const todayYMD = fmtYMD(new Date());
@@ -258,7 +259,7 @@ <h3 style="margin:0 0 8px">Add Time Entry</h3>
         <div class="daytop"><div><strong>${humanDate(d)}</strong></div><div class="muted small">${total>0? total+'h':''}</div></div>
         <div class="list"></div>
         <div style="margin-top:auto">
-          <button class="btn" data-add="${ymd}">Add Entry</button>
+          <button class="btn small" data-add="${ymd}">Add</button>
         </div>
       `;
       const listEl = dayEl.querySelector('.list');
@@ -311,13 +312,11 @@ <h3 style="margin:0 0 8px">Add Time Entry</h3>
     saveDB(); entryDialog.close(); renderCalendar();
   };
 
-  addEntryOpen.onclick = ()=> openDialog(fmtYMD(new Date()));
-  btnPrev.onclick = ()=> { anchor = addDays(startOfISOWeek(anchor), -7); renderCalendar(); }; renderCalendar(); };
-  btnNext.onclick = ()=> { anchor = addDays(startOfISOWeek(anchor), 7); renderCalendar(); }; renderCalendar(); };
+  // Toolbar actions (1-week shift)
+  btnPrev.onclick = ()=> { anchor = addDays(startOfISOWeek(anchor), -7); renderCalendar(); };
+  btnNext.onclick = ()=> { anchor = addDays(startOfISOWeek(anchor), 7); renderCalendar(); };
   btnToday.onclick = ()=> { anchor = startOfISOWeek(new Date()); renderCalendar(); };
 
-  function delEntry(id){ db.entries = db.entries.filter(e=> e.id!==id); saveDB(); }
-
   // ===== Totals =====
   const totStart = document.getElementById('totStart');
   const totEnd = document.getElementById('totEnd');