Add support for deleting absence entries on table

frontend/src/App.tsx

@@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { Login } from "./pages/Login";
 import { Report } from "./pages/Report";
 import { Help } from "./pages/Help";
-import { VacationPlanner } from "./pages/VacationPlanner";
+import { AbsencePlanner } from "./pages/AbsencePlanner";
 import { AuthProvider } from "./components/AuthProvider";
 import { ProtectedRoute } from "./components/ProtectedRoute";
 import { getISOWeek } from "date-fns";
@@ -50,10 +50,10 @@ export const App = () => {
                 }
               />
               <Route
-                path="/vacation"
+                path="/absence"
                 element={
                   <ProtectedRoute>
-                    <VacationPlanner />
+                    <AbsencePlanner />
                   </ProtectedRoute>
                 }
               />

frontend/src/components/HeaderUser.tsx

@@ -20,8 +20,8 @@ export const HeaderUser = ({ username }: { username: string }) => {
       <a className="nav-item" href="/report">
         Report time
       </a>
-      <a className="nav-item" href="/vacation">
-        Vacation
+      <a className="nav-item" href="/absence">
+        Absence
       </a>
       <button type="button" className="nav-item" onClick={logout}>
         Log out

frontend/src/index.css

@@ -841,19 +841,72 @@ Other button classes are defined further down together with other classes for th
   overflow: hidden;
 }
 
-.vacation-plan-picker-label {
+.absence-plan-picker-label {
   margin: 0 0 0.1rem;
 }
 
-.vacation-plan-dates-wrapper {
+.absence-plan-dates-wrapper {
   display: flex;
   margin-right: 2rem;
+  align-items: center;
 }
 
-.vacation-plan-container {
+.absence-plan-container {
   margin: 3rem;
 }
 
+.table-wrapper {
+  padding: 1.5rem 0;
+}
+
+table {
+  border-collapse: collapse;
+  width: 70%;
+}
+
+td {
+  border: none;
+  text-align: left;
+  padding: 8px;
+}
+
+th {
+  border-top: 1px solid hsl(0deg 0% 90%);
+  text-align: left;
+  padding: 8px;
+  background-color: hsl(185deg 92% 20%);
+  color: white;
+}
+
+tr:nth-child(even) {
+  background-color: hsl(186deg 30% 94%);
+}
+
+tr:last-of-type td {
+  border-bottom: 1px solid hsl(0deg 0% 90%);
+}
+
+.image-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.pencil-icon {
+  width: 1.25rem;
+}
+
+.trash-icon {
+  width: 1.25rem;
+}
+
+.trash-button {
+  border: none;
+  display: flex;
+  background: none;
+  cursor: pointer;
+}
+
 .apply-dates-button {
   height: 3rem;
   width: 8rem;

frontend/src/model.tsx

@@ -28,11 +28,11 @@ export interface Issue {
 
 export interface TimeEntry {
   id: number;
-  issue_id: number;
-  activity_id: number;
+  issue_id?: number;
+  activity_id?: number;
   hours: number;
-  comments: string;
-  spent_on: string;
+  comments?: string;
+  spent_on?: string;
 }
 
 export interface FetchedTimeEntry {