Better formatting for total hours table in the modal. Include the project identifier in the total hour computation.

back-end/main.go

@@ -22,6 +22,7 @@ type Entry struct {
 
 type Project struct {
 	Id         string
+	Identifier string
 	Name       string
 }
 
@@ -75,7 +76,7 @@ func main() {
 			projects_map = make(map[string]string)
 
 			for _, e := range projects {
-				projects_map[e.Id] = e.Name
+				projects_map[e.Id] = fmt.Sprintf("(%s) %s", e.Identifier, e.Name)
 			}
 
 			var hours map[string]float64

front-end/src/components/Controls.vue

@@ -58,18 +58,15 @@ async function showModalTotalHours() {
   <Button label=">" @click="setDate(1)" style="margin-left: 3px;" />
   <Button label="total hours" @click="showModalTotalHours" style="margin-left: 20px;" />
   <Dialog v-model:visible="modalTotalHours.visible" modal header="Total hours">
-    <table>
+    <table style="width: 100%; border-collapse: collapse; border: 1px solid #ccc; font-family: Arial, sans-serif; font-size: 14px;">
       <tbody>
         <tr v-for="project in Object.keys(modalTotalHours.hours)">
-          <td>{{ project }}</td>
-          <td>{{ modalTotalHours.hours[project] }}</td>
-        </tr>
-        <tr v-if="modalTotalHours.total > 0">
-          <td colspan="2"><hr /></td>
+          <td style="border: 1px solid #ccc; padding: 8px;">{{ project }}</td>
+          <td style="border: 1px solid #ccc; padding: 8px;">{{ modalTotalHours.hours[project] }}</td>
         </tr>
         <tr>
-          <td>Total hours</td>
-          <td>{{ modalTotalHours.total }}</td>
+          <td style="border: 1px solid #ccc; padding: 8px; background: #f4f4f4; font-weight: bold;">Total hours</td>
+          <td style="border: 1px solid #ccc; padding: 8px; background: #f4f4f4; font-weight: bold;">{{ modalTotalHours.total }}</td>
         </tr>
       </tbody>
     </table>