fix(export): pdf export and styling (#72)

Author: gorillamoe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "timetrack",
-  "version": "5.10.0",
+  "version": "5.10.1",
   "description": "Simple desktop application to track your time spent on different projects.",
   "main": "./out/main/index.js",
   "author": {

src/database.ts

@@ -597,6 +597,7 @@ const getDataForPDFExport = async (
 
   const res = await db
     .select({
+      id: task.id,
       name: taskDefinition.name,
       projectName: project.name,
       companyName: company.name,
@@ -632,6 +633,7 @@ const getDataForPDFExport = async (
     const seconds = Math.max(0, t.durationSeconds ?? 0)
 
     return {
+      id: t.id,
       name: t.name,
       projectName: t.projectName,
       companyName: t.companyName,

src/global.d.ts

@@ -17,6 +17,7 @@ type PDFTotalObject = {
 }
 
 type PDFQueryResult = {
+  id: number
   date: string
   description: string
   name: string

src/renderer/src/components/PDFDocument.svelte

@@ -29,42 +29,29 @@
   })()
 </script>
 
-<div class="space-y-4 print:space-y-2">
-  <!-- Header -->
-  <section class="hero bg-base-200 rounded-lg p-8 print:p-4 print:bg-white">
-    <div class="hero-content text-center">
-      <div>
-        <h1 class="text-4xl font-bold print:text-2xl">
-          <a href="https://timetrack.mwco.app">timetrack</a>
-        </h1>
-      </div>
-    </div>
-  </section>
-
+<div class="space-y-2">
   <!-- Tasks List -->
-  {#each pdfDocument as item (`${item.companyName}-${item.projectName}-${item.name}-${item.date}`)}
-    <div
-      class="card bg-base-200 shadow-xl print:bg-white print:shadow-none print:border print:border-gray-300"
-    >
-      <div class="card-body print:p-4">
-        <h3 class="text-sm font-semibold text-base-content/70 print:text-xs">
+  {#each pdfDocument as item (item.id)}
+    <div class="card shadow-xl border">
+      <div class="card-body p-4">
+        <h3 class="font-semibold text-xs">
           {item.companyName}
         </h3>
-        <h2 class="card-title print:text-xl">{item.projectName}</h2>
-        <p class="text-lg font-semibold print:text-base">{item.name}</p>
+        <h2 class="card-title text-xl">{item.projectName}</h2>
+        <p class="font-semibold text-base">{item.name}</p>
         {#if item.description}
-          <div class="prose max-w-none markdown-content print:text-sm">
+          <div class="prose max-w-none markdown-content text-sm">
             <!-- eslint-disable-next-line svelte/no-at-html-tags -->
             {@html item.description}
           </div>
         {/if}
-        <div class="flex gap-4 mt-2 print:text-sm">
+        <div class="flex gap-4 mt-2 text-sm">
           <div class="flex items-center gap-2">
-            <i class="fa-solid fa-calendar print:hidden"></i>
+            <i class="fa-solid fa-calendar hidden"></i>
             <time datetime={item.date}>{item.date}</time>
           </div>
           <div class="flex items-center gap-2">
-            <i class="fa-solid fa-clock print:hidden"></i>
+            <i class="fa-solid fa-clock hidden"></i>
             <span>Time spent: {getHMSStringFromSeconds(item.seconds)}</span>
           </div>
         </div>
@@ -73,37 +60,31 @@
   {/each}
 
   <!-- Total View -->
-  <section
-    class="hero bg-base-200 rounded-lg p-8 print:p-4 print:bg-white print:mt-8"
-  >
+  <section class="hero rounded-lg p-4 mt-8">
     <div class="hero-content">
       <div>
-        <h2 class="text-3xl font-bold print:text-xl">Total Time</h2>
-        <p class="text-lg mt-2 print:text-sm">
+        <h2 class="font-bold text-xl">Total Time</h2>
+        <p class="mt-2 text-sm">
           Total time spent on projects and tasks combined.
         </p>
       </div>
     </div>
   </section>
 
   {#each Object.keys(total) as companyName (companyName)}
-    <div
-      class="card bg-base-200 shadow-xl print:bg-white print:shadow-none print:border print:border-gray-300"
-    >
-      <div class="card-body print:p-4">
-        <h2 class="card-title print:text-xl">{companyName}</h2>
+    <div class="card shadow-xl border">
+      <div class="card-body p-4">
+        <h2 class="card-title text-xl">{companyName}</h2>
         {#each Object.keys(total[companyName]) as projectName (projectName)}
           <div class="mt-4">
-            <h3 class="text-lg font-semibold print:text-base mb-2">
+            <h3 class="font-semibold text-base mb-2">
               {projectName}
             </h3>
-            <div class="space-y-2 print:text-sm ml-4">
+            <div class="space-y-2 text-sm ml-4">
               {#each Object.keys(total[companyName][projectName]) as taskName (taskName)}
                 <div class="flex justify-between items-center">
                   <span class="font-semibold">{taskName}</span>
-                  <span
-                    class="badge badge-primary badge-lg print:badge-sm print:bg-gray-200 print:text-gray-800"
-                  >
+                  <span class="badge badge-primary badge-sm text-base">
                     {getHMSStringFromSeconds(
                       total[companyName][projectName][taskName],
                     )}
@@ -116,4 +97,15 @@
       </div>
     </div>
   {/each}
+
+  <!-- Powered by header -->
+  <section class="hero rounded-lg p-4">
+    <div class="hero-content text-center">
+      <div>
+        <h1 class="font-bold text-sm">
+          Generated with ♥️ <a href="https://timetrack.mwco.app">timetrack</a>
+        </h1>
+      </div>
+    </div>
+  </section>
 </div>

src/renderer/src/components/Search.svelte

@@ -351,6 +351,7 @@
 
     // Convert search results to PDFQueryResult format
     const data: PDFQueryResult[] = result.tasks.map(task => ({
+      id: task.id,
       companyName: task.companyName,
       projectName: task.projectName,
       name: task.name,