seperated create abwesenheit button + added first part of frontend logic

added abwesenheiten table
changed header + temporary removed empty days
2025-04-02 10:44:55 +02:00 · 2025-04-02 10:44:23 +02:00 · 2025-03-28 13:39:22 +01:00 · 2025-03-28 13:06:14 +01:00 · 2025-03-28 08:23:52 +01:00 · 2025-03-27 12:21:58 +01:00
23 changed files with 631 additions and 312 deletions
--- a/Backend/endpoints/time.go
+++ b/Backend/endpoints/time.go
@@ -8,6 +8,7 @@ import (
 	"encoding/json"
 	"log"
 	"net/http"
+	"sort"
 	"strconv"
 	"time"
 )
@@ -69,20 +70,20 @@ func getBookings(w http.ResponseWriter, r *http.Request) {
 	}
 	tsTo = tsTo.AddDate(0, 0, 1) // so that today is inside

-	bookings, err := (*models.Booking).GetBookingsGrouped(nil, user.CardUID, tsFrom, tsTo)
-	if err != nil {
-		log.Println("Error getting bookings: ", err)
-		http.Error(w, "Internal Server Error", http.StatusInternalServerError)
-		return
-	}
+	workDays := (*models.WorkDay).GetWorkDays(nil, user.CardUID, tsFrom, tsTo)
+	sort.Slice(workDays, func(i, j int) bool {
+		return workDays[i].Day.After(workDays[j].Day)
+	})
+
 	if r.Header.Get("Accept") == "application/json" {
 		w.Header().Set("Content-Type", "application/json")
 		w.WriteHeader(http.StatusOK)
-		json.NewEncoder(w).Encode(bookings)
+		json.NewEncoder(w).Encode(workDays)
 		return
 	}
+
 	ctx := context.WithValue(r.Context(), "user", user)
-	templates.TimePage(bookings).Render(ctx, w)
+	templates.TimePage(workDays).Render(ctx, w)
 }

 func updateBooking(w http.ResponseWriter, r *http.Request) {
--- a/Backend/helper/system.go
+++ b/Backend/helper/system.go
@@ -2,11 +2,13 @@ package helper

 import (
 	"os"
+	"time"
 )

 // Returns env with default fallback value.
 //
 // Params:
+//
 //	key - enviroment var name
 //	fallback - default value
 func GetEnv(key, fallback string) string {
@@ -15,3 +17,37 @@ func GetEnv(key, fallback string) string {
 	}
 	return fallback
 }
+
+type CacheItem struct {
+	value      any
+	expiration time.Time
+}
+
+type Cache struct {
+	data  map[string]CacheItem
+	ttl   time.Duration
+	fetch func(key string) (any, error)
+}
+
+func NewCache(ttl time.Duration, fetchFunc func(key string) (any, error)) *Cache {
+	return &Cache{
+		data:  make(map[string]CacheItem),
+		ttl:   ttl,
+		fetch: fetchFunc,
+	}
+}
+
+func (c *Cache) Get(key string) (any, error) {
+	if item, found := c.data[key]; found {
+		if time.Now().Before(item.expiration) {
+			return item.value, nil
+		}
+	}
+
+	value, err := c.fetch(key)
+	if err != nil {
+		return nil, err
+	}
+	c.data[key] = CacheItem{value: value, expiration: time.Now().Add(c.ttl)}
+	return value, nil
+}
--- a/Backend/main.go
+++ b/Backend/main.go
@@ -4,14 +4,12 @@ import (
 	"arbeitszeitmessung/endpoints"
 	"arbeitszeitmessung/helper"
 	"arbeitszeitmessung/models"
-	"arbeitszeitmessung/templates"
 	"context"
 	"fmt"
 	"log"
 	"net/http"
 	"time"

-	"github.com/a-h/templ"
 	"github.com/joho/godotenv"
 	_ "github.com/lib/pq"
 )
@@ -42,13 +40,14 @@ func main() {
 	server.HandleFunc("/user/login", endpoints.LoginHandler)
 	server.HandleFunc("/user", endpoints.UserHandler)
 	server.HandleFunc("/team", endpoints.TeamHandler)
-	server.Handle("/", templ.Handler(templates.NavPage()))
+	server.HandleFunc("/team/presence", endpoints.TeamHandler)
+	server.Handle("/", http.RedirectHandler("/time", http.StatusPermanentRedirect))
 	server.Handle("/static/", http.StripPrefix("/static/", fs))

 	serverSessionMiddleware := endpoints.Session.LoadAndSave(server)

 	// starting the http server
-	fmt.Printf("Server is running at http://localhost:8000 exposed to port %s\n", helper.GetEnv("EXPOSED_PORT", "8000"))
+	fmt.Printf("Server is running at http://localhost:%s\n", helper.GetEnv("EXPOSED_PORT", "8080"))
 	log.Fatal(http.ListenAndServe(":8080", serverSessionMiddleware))
 }

--- a/Backend/models/booking.go
+++ b/Backend/models/booking.go
@@ -136,7 +136,7 @@ func (b *Booking) GetBookingsGrouped(card_uid string, tsFrom time.Time, tsTo tim
 			return bookings[i].Timestamp.Before(bookings[j].Timestamp)
 		})
 		workDay := WorkDay{Day: day, Bookings: bookings}
-		workDay.GetWorkTime()
+		workDay.getWorkTime()
 		result = append(result, workDay)
 	}

@@ -162,10 +162,14 @@ func (b Booking) Save() {

 func (b *Booking) GetBookingType() string {
 	switch b.CheckInOut {
-	case 1, 3: //manuelle Änderung
+	case 1: //manuelle Änderung
 		return "kommen"
-	case 2, 4: //manuelle Änderung
+	case 3:
+		return "kommen manuell"
+	case 2: //manuelle Änderung
 		return "gehen"
+	case 4:
+		return "gehen manuell"
 	case 255:
 		return "abgemeldet"
 	default:
@@ -227,3 +231,7 @@ func (b *Booking) UpdateTime(newTime time.Time) {
 	b.Update(newBooking)
 	b.Save()
 }
+
+func (b *Booking) ToString() string {
+	return fmt.Sprintf("Booking %d: at: %s, as type: %d", b.CounterId, b.Timestamp.Format("15:04"), b.CheckInOut)
+}
--- a/Backend/models/workDay.go
+++ b/Backend/models/workDay.go
@@ -1,6 +1,7 @@
 package models

 import (
+	"encoding/json"
 	"fmt"
 	"log"
 	"time"
@@ -11,58 +12,61 @@ type WorkDay struct {
 	Bookings  []Booking `json:"bookings"`
 	workTime  time.Duration
 	pauseTime time.Duration
+	TimeFrom  time.Time
+	TimeTo    time.Time
 }

 func (d *WorkDay) GetWorkDays(card_uid string, tsFrom, tsTo time.Time) []WorkDay {
 	var workDays []WorkDay
 	var workSec, pauseSec float64
 	qStr, err := DB.Prepare(`
-	WITH ordered_bookings AS (
+		WITH all_days AS (
+        SELECT generate_series($2::DATE, $3::DATE - INTERVAL '1 day', INTERVAL '1 day')::DATE AS work_date
+    ),
+    ordered_bookings AS (
        SELECT
-        timestamp::DATE AS work_date,  -- Extract date for grouping
+            timestamp::DATE AS work_date,
            timestamp,
            check_in_out,
-        LAG(timestamp) OVER (
-            PARTITION BY card_uid, timestamp::DATE  -- Reset for each day
-            ORDER BY timestamp
-        ) AS prev_timestamp,
-        LAG(check_in_out) OVER (
-            PARTITION BY card_uid, timestamp::DATE
-            ORDER BY timestamp
-        ) AS prev_check
+            counter_id,
+            LAG(timestamp) OVER (PARTITION BY card_uid, timestamp::DATE ORDER BY timestamp) AS prev_timestamp,
+            LAG(check_in_out) OVER (PARTITION BY card_uid, timestamp::DATE ORDER BY timestamp) AS prev_check
        FROM anwesenheit
-    WHERE card_uid = $1  -- Replace with actual card_uid
-    AND timestamp::DATE >= $2  -- Set date range
+        WHERE card_uid = $1
+        AND timestamp::DATE >= $2
        AND timestamp::DATE <= $3
    )
    SELECT
-	    work_date,
-
-	    -- Total work time per day
+        d.work_date,
+        COALESCE(MIN(b.timestamp), NOW()) AS time_from,
+        COALESCE(MAX(b.timestamp), NOW()) AS time_to,
        COALESCE(
            EXTRACT(EPOCH FROM SUM(
                CASE
-	                WHEN prev_check IN (1, 3) AND check_in_out IN (2, 4, 254)
-	                THEN timestamp - prev_timestamp
+                    WHEN b.prev_check IN (1, 3) AND b.check_in_out IN (2, 4, 255)
+                    THEN b.timestamp - b.prev_timestamp
                    ELSE INTERVAL '0'
                END
            )), 0
-	    ) AS total_work,
-
-	    -- Extract total pause time in seconds
+        ) AS total_work_seconds,
        COALESCE(
            EXTRACT(EPOCH FROM SUM(
                CASE
-	                WHEN prev_check IN (2, 4, 254) AND check_in_out IN (1, 3)
-	                THEN timestamp - prev_timestamp
+                    WHEN b.prev_check IN (2, 4, 255) AND b.check_in_out IN (1, 3)
+                    THEN b.timestamp - b.prev_timestamp
                    ELSE INTERVAL '0'
                END
            )), 0
-	    ) AS total_pause
-
-	FROM ordered_bookings
-	GROUP BY work_date
-	ORDER BY work_date;`)
+        ) AS total_pause_seconds,
+        COALESCE(jsonb_agg(jsonb_build_object(
+            'check_in_out', b.check_in_out,
+            'timestamp', b.timestamp,
+            'counter_id', b.counter_id
+        ) ORDER BY b.timestamp), '[]'::jsonb) AS bookings
+    FROM all_days d
+    LEFT JOIN ordered_bookings b ON d.work_date = b.work_date
+    GROUP BY d.work_date
+    ORDER BY d.work_date;`)

 	if err != nil {
 		log.Println("Error preparing SQL statement", err)
@@ -78,13 +82,25 @@ func (d *WorkDay) GetWorkDays(card_uid string, tsFrom, tsTo time.Time) []WorkDay
 	defer rows.Close()
 	for rows.Next() {
 		var workDay WorkDay
-		if err := rows.Scan(&workDay.Day, &workSec, &pauseSec); err != nil {
+		var bookings []byte
+		if err := rows.Scan(&workDay.Day, &workDay.TimeFrom, &workDay.TimeTo, &workSec, &pauseSec, &bookings); err != nil {
 			log.Println("Error scanning row!", err)
 			return workDays
 		}
 		workDay.workTime = time.Duration(workSec * float64(time.Second))
 		workDay.pauseTime = time.Duration(pauseSec * float64(time.Second))
+		err = json.Unmarshal(bookings, &workDay.Bookings)
+		if err != nil {
+			log.Println("Error parsing bookings JSON!", err)
+			return nil
+		}
+
+		if workDay.Day.Equal(time.Now().Truncate(24 * time.Hour)) {
+			workDay.getWorkTime()
+		} else {
 			workDay.calcPauseTime()
+		}
+
 		workDays = append(workDays, workDay)
 	}
 	if err = rows.Err(); err != nil {
@@ -108,7 +124,10 @@ func (d *WorkDay) calcPauseTime() {
 }

 // Gets the duration someone worked that day
-func (d *WorkDay) GetWorkTime() {
+func (d *WorkDay) getWorkTime() {
+	if len(d.Bookings) <= 1 && d.Bookings[0].CounterId == 0 {
+		return
+	}
 	var workTime, pauseTime time.Duration
 	var lastBooking Booking
 	for _, booking := range d.Bookings {
@@ -131,6 +150,7 @@ func (d *WorkDay) GetWorkTime() {
 	d.calcPauseTime()
 }

+// Converts duration to string
 func formatDuration(d time.Duration) string {
 	hours := int(d.Abs().Hours())
 	minutes := int(d.Abs().Minutes()) % 60
@@ -144,9 +164,6 @@ func formatDuration(d time.Duration) string {
 	}
 }

-// Converts duration to string and replaces 0s with in
-//
-// -> output xhxmin
 func (d *WorkDay) GetWorkTimeString() (string, string) {
 	workString := formatDuration(d.workTime)
 	pauseString := formatDuration(d.pauseTime)
--- a/Backend/src/main.css
+++ b/Backend/src/main.css
@@ -30,7 +30,7 @@
@layer components {
  .grid-main {
    display: grid;
-        grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: 2fr auto 1fr;
    align-items: stretch;
  }

--- a/Backend/static/css/styles.css
+++ b/Backend/static/css/styles.css
@@ -606,6 +606,9 @@
  .flex-grow {
    flex-grow: 1;
  }
+  .grow {
+    flex-grow: 1;
+  }
  .grow-1 {
    flex-grow: 1;
  }
@@ -730,6 +733,10 @@
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
@@ -769,6 +776,11 @@
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
+  .group-\[\.edit\]\:block {
+    &:is(:where(.group):is(.edit) *) {
+      display: block;
+    }
+  }
  .group-\[\.edit\]\:hidden {
    &:is(:where(.group):is(.edit) *) {
      display: none;
@@ -907,6 +919,11 @@
      width: calc(1/2 * 100%);
    }
  }
+  .md\:flex-row-reverse {
+    @media (width >= 48rem) {
+      flex-direction: row-reverse;
+    }
+  }
  .md\:px-4 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 4);
@@ -928,7 +945,7 @@
@layer components {
  .grid-main {
    display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: 2fr auto 1fr;
    align-items: stretch;
  }
  .grid-sub {
--- a/Backend/static/script.js
+++ b/Backend/static/script.js
@@ -4,8 +4,12 @@ function editDay(element, event, formId) {
    .querySelector(".time-component > form");
  form.classList.toggle("edit");
  element.classList.toggle("edit");
+  console.log(form);
  if (element.classList.contains("edit")) {
    event.preventDefault();
+    form.querySelectorAll("input, select").forEach((input) => {
+      input.disabled = false;
+    });
  } else {
    form.submit();
  }
--- a/Backend/templates/headerComponent.templ
+++ b/Backend/templates/headerComponent.templ
@@ -3,7 +3,7 @@ package templates
 templ headerComponent() {
 	<div class="flex flex-row justify-between md:mx-[10%] py-2">
 		<a href="/time">Zeitverwaltung</a>
-		<a href="/team">Mitarbeiter</a>
-		<a href="/user">Nutzer</a>
+		<a href="/team">Abrechnung</a>
+		<a href="/user">Einstellungen</a>
 	</div>
 }
--- a/Backend/templates/headerComponent_templ.go
+++ b/Backend/templates/headerComponent_templ.go
@@ -29,7 +29,7 @@ func headerComponent() templ.Component {
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"flex flex-row justify-between md:mx-[10%] py-2\"><a href=\"/time\">Zeitverwaltung</a> <a href=\"/team\">Mitarbeiter</a> <a href=\"/user\">Nutzer</a></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"flex flex-row justify-between md:mx-[10%] py-2\"><a href=\"/time\">Zeitverwaltung</a> <a href=\"/team\">Abrechnung</a> <a href=\"/user\">Einstellungen</a></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/Backend/templates/pages.templ
+++ b/Backend/templates/pages.templ
@@ -22,8 +22,8 @@ templ TimePage(workDays []models.WorkDay) {
 	@headerComponent()
 	<div class="grid-main divide-y-1">
 		@inputForm()
-		for _, bookingGroup := range workDays {
-			@dayComponent(bookingGroup)
+		for _, day := range workDays {
+			@dayComponent(day)
 		}
 	</div>
 	@LegendComponent()
--- a/Backend/templates/pages_templ.go
+++ b/Backend/templates/pages_templ.go
@@ -81,8 +81,8 @@ func TimePage(workDays []models.WorkDay) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		for _, bookingGroup := range workDays {
-			templ_7745c5c3_Err = dayComponent(bookingGroup).Render(ctx, templ_7745c5c3_Buffer)
+		for _, day := range workDays {
+			templ_7745c5c3_Err = dayComponent(day).Render(ctx, templ_7745c5c3_Buffer)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
--- a/Backend/templates/teamComponents.templ
+++ b/Backend/templates/teamComponents.templ
@@ -17,6 +17,15 @@ templ weekDayComponent(user models.User, day models.WorkDay) {
 				<span class="text-accent">{ work }</span>
 				<span class="text-neutral-500">{ pause }</span>
 			</div>
+			<div class="flex flex-row gap-2 items-center">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="size-4" viewBox="0 0 16 16">
+					<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"></path>
+					<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"></path>
+				</svg>
+				<span>{ day.TimeFrom.Format("15:04") }</span>
+				<span>-</span>
+				<span>{ day.TimeTo.Format("15:04") }</span>
+			</div>
 		</div>
 	</div>
 }
--- a/Backend/templates/teamComponents_templ.go
+++ b/Backend/templates/teamComponents_templ.go
@@ -97,7 +97,33 @@ func weekDayComponent(user models.User, day models.WorkDay) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</span></div></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</span></div><div class=\"flex flex-row gap-2 items-center\"><svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" class=\"size-4\" viewBox=\"0 0 16 16\"><path d=\"M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z\"></path> <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0\"></path></svg> <span>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 string
+		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(day.TimeFrom.Format("15:04"))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 25, Col: 40}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</span> <span>-</span> <span>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var7 string
+		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(day.TimeTo.Format("15:04"))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 27, Col: 38}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</span></div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -121,53 +147,53 @@ func employeComponent(week models.WorkWeek) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var6 == nil {
-			templ_7745c5c3_Var6 = templ.NopComponent
+		templ_7745c5c3_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)

 		year, kw := week.WeekStart.ISOWeek()
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "<div class=\"grid-sub divide-x-1\"><div class=\"grid-cell\"><p class=\"font-bold uppercase\">")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var7 string
-		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(week.User.Vorname)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 30, Col: 53}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, " ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var8 string
-		templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(week.User.Name)
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 30, Col: 72}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</p><p class=\"text-sm\">Arbeitszeit</p><p class=\"text-accent\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "<div class=\"grid-sub divide-x-1\"><div class=\"grid-cell\"><p class=\"font-bold uppercase\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var9 string
-		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(week.GetWorkHourString())
+		templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(week.User.Vorname)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 32, Col: 52}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 39, Col: 53}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "</p></div><div class=\"grid-cell col-span-3 flex flex-col gap-2\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, " ")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 string
+		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(week.User.Name)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 39, Col: 72}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</p><p class=\"text-sm\">Arbeitszeit</p><p class=\"text-accent\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(week.GetWorkHourString())
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 41, Col: 52}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</p></div><div class=\"grid-cell col-span-3 flex flex-col gap-2\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -177,46 +203,46 @@ func employeComponent(week models.WorkWeek) templ.Component {
 				return templ_7745c5c3_Err
 			}
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "</div><form class=\"grid-cell flex flex-col justify-between gap-2\" method=\"post\"><p class=\"text-sm\"><span class=\"\">Woche:</span> ")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var10 string
-		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%02d-%d", kw, year))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 40, Col: 85}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</p><input type=\"hidden\" name=\"method\" value=\"accept\"> <input type=\"hidden\" name=\"user\" value=\"")
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		var templ_7745c5c3_Var11 string
-		templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(week.User.PersonalNummer))
-		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 42, Col: 82}
-		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
-		if templ_7745c5c3_Err != nil {
-			return templ_7745c5c3_Err
-		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "\"> <input type=\"hidden\" name=\"week\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</div><form class=\"grid-cell flex flex-col justify-between gap-2\" method=\"post\"><p class=\"text-sm\"><span class=\"\">Woche:</span> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var12 string
-		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(week.WeekStart.Format(time.DateOnly))
+		templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("%02d-%d", kw, year))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 43, Col: 80}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 49, Col: 85}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "\"> <button type=\"submit\" class=\"w-full bg-neutral-100 cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50\"><p class=\"\">Bestätigen</p></button></form></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</p><input type=\"hidden\" name=\"method\" value=\"accept\"> <input type=\"hidden\" name=\"user\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var13 string
+		templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(week.User.PersonalNummer))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 51, Col: 82}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "\"> <input type=\"hidden\" name=\"week\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var14 string
+		templ_7745c5c3_Var14, templ_7745c5c3_Err = templ.JoinStringErrs(week.WeekStart.Format(time.DateOnly))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/teamComponents.templ`, Line: 52, Col: 80}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\"> <button type=\"submit\" class=\"w-full bg-neutral-100 cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 focus:bg-neutral-700 active:bg-neutral-700 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50\"><p class=\"\">Bestätigen</p></button></form></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/Backend/templates/timeComponents.templ
+++ b/Backend/templates/timeComponents.templ
@@ -14,14 +14,14 @@ templ inputForm() {
 		user := ctx.Value("user").(models.User)
 	}}
 	<div class="grid-sub divide-x-1 bg-neutral-300 max-md:flex max-md:flex-col">
-		<div class="grid-cell col-span-2 md:col-span-1 max-md:grid grid-cols-2">
+		<div class="grid-cell md:col-span-1 max-md:grid grid-cols-2">
 			<p class="font-bold uppercase">{ user.Vorname + " " + user.Name }</p>
 			<div class="justify-self-end">
 				<p class="text-sm">Überstunden</p>
 				<p class="text-accent">4h 32min</p>
 			</div>
 		</div>
-		<form id="timeRangeForm" method="GET" class="grid-cell flex flex-row col-span-3 md:col-span-3 gap-2 ">
+		<form id="timeRangeForm" method="GET" class="grid-cell flex flex-row md:col-span-3 gap-2 ">
 			@lineComponent()
 			<div class="flex flex-col gap-2 justify-between grow-1">
 				<input type="date" value={ urlParams.Get("time_from") } name="time_from" class="w-full bg-neutral-100 placeholder:text-neutral-400 text-neutral-700 text-sm border border-neutral-0 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300" placeholder="Zeitraum von..."/>
@@ -39,12 +39,17 @@ templ inputForm() {
 templ dayComponent(workDay models.WorkDay) {
 	{{
 		work, pause := workDay.GetWorkTimeString()
+		justify := ""
+		if len(workDay.Bookings) <= 1 {
+			justify = "justify-content: center"
+		}
 	}}
 	<div class="grid-sub divide-x-1 hover:bg-neutral-200 transition-colors">
-		<div class="grid-cell col-span-2 md:col-span-1 flex flex-row gap-2">
+		<div class="grid-cell md:col-span-1 flex flex-row gap-2">
 			@timeGaugeComponent(workDay.GetWorkDayProgress(ctx.Value("user").(models.User)), workDay.Day.Equal(time.Now().Truncate(24*time.Hour)), workDay.RequiresAction())
 			<div>
 				<p class=""><span class="font-bold uppercase hidden md:inline">{ workDay.Day.Format("Mon") }:</span> { workDay.Day.Format("02.01.2006") }</p>
+				if work!="" {
 					<p class=" text-sm mt-1">Arbeitszeit:</p>
 					if (workDay.RequiresAction()) {
 						<p class="text-red-600">Bitte anpassen</p>
@@ -52,14 +57,20 @@ templ dayComponent(workDay models.WorkDay) {
 						<p class=" text-accent">{ work }</p>
 					}
 					<p class="text-neutral-500">{ pause }</p>
+				}
 			</div>
 		</div>
-		<div class="time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full grid-cell">
+		<div class="time-component flex flex-row md:col-span-3 gap-2 w-full grid-cell">
 			@lineComponent()
-			<form id={ "time-" + workDay.Day.Format("2006-01-02") } class="flex flex-col gap-2 justify-between group w-full" method="post">
+			<form id={ "time-" + workDay.Day.Format("2006-01-02") } class="flex flex-col gap-2 group w-full justify-between" style={ justify } method="post">
+				if len(workDay.Bookings) <= 1 && workDay.Bookings[len(workDay.Bookings)-1].CounterId == 0 {
+					@noBookingComponent(workDay)
+				} else {
 					for _, booking := range workDay.Bookings {
 						@bookingComponent(booking)
 					}
+					@newBookingComponent(workDay)
+				}
 			</form>
 		</div>
 		<div class="grid-cell">
@@ -71,9 +82,10 @@ templ dayComponent(workDay models.WorkDay) {
 templ changeButtonComponent(id string) {
 	<button type="button" class="cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group" type="button" onclick={ templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id) }>
 		<p class="hidden md:block group-[.edit]:hidden">Ändern</p>
-		<p class="hidden group-[.edit]:md:block">Submit</p>
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 md:hidden">
-			<path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"></path>
+		<p class="hidden group-[.edit]:md:block">Absenden</p>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 md:hidden">
+			<path class="group-[.edit]:hidden md:hidden" d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"></path>
+			<path class="hidden group-[.edit]:block md:hidden" d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"></path>
 		</svg>
 	</button>
 }
@@ -120,11 +132,37 @@ templ lineComponent() {
 	</div>
 }

+templ noBookingComponent(d models.WorkDay) {
+	<div class="flex flex-col gap-2 align-center">
+		// <p class="text-xs">Keine Buchung gefunden. Bitte Grund der Abwesenheit eingeben!</p>
+		<select class="grow cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm transition-colors border-neutral-900" disabled name="abwesenheit">
+			<option value="0">Abwesenheit?</option>
+			<option value="1">Urlaub</option>
+			<option value="2">Kurzarbeit</option>
+			<option value="3">Krank</option>
+			<option value="4">Kindkrank</option>
+		</select>
+		@newBookingComponent(d)
+	</div>
+}
+
+templ newBookingComponent(d models.WorkDay) {
+	<div class="hidden group-[.edit]:block">
+		<input type="time" value={ time.Now().Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300"/>
+		<button type="button">Neue Buchung</button>
+		<select>
+			<option value="0" disabled>Kommen/Gehen</option>
+			<option value="3" selected?={ d.Bookings[len(d.Bookings)-1].CheckInOut%2 == 0 }>Kommen</option>
+			<option value="4" selected?={ d.Bookings[len(d.Bookings)-1].CheckInOut%2 == 1 }>Gehen</option>
+		</select>
+	</div>
+}
+
 templ bookingComponent(booking models.Booking) {
 	<div>
 		<p class="text-neutral-500">
 			<span class="text-neutral-700 group-[.edit]:hidden inline">{ booking.Timestamp.Format("15:04") }</span>
-			<input name={ "booking_" + strconv.Itoa(booking.CounterId) } type="time" value={ booking.Timestamp.Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300"/>
+			<input disabled name={ "booking_" + strconv.Itoa(booking.CounterId) } type="time" value={ booking.Timestamp.Format("15:04") } class="text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300"/>
 			{ booking.GetBookingType() }
 		</p>
 	</div>
--- a/Backend/templates/timeComponents_templ.go
+++ b/Backend/templates/timeComponents_templ.go
@@ -40,7 +40,7 @@ func inputForm() templ.Component {

 		urlParams := ctx.Value("urlParams").(url.Values)
 		user := ctx.Value("user").(models.User)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid-sub divide-x-1 bg-neutral-300 max-md:flex max-md:flex-col\"><div class=\"grid-cell col-span-2 md:col-span-1 max-md:grid grid-cols-2\"><p class=\"font-bold uppercase\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<div class=\"grid-sub divide-x-1 bg-neutral-300 max-md:flex max-md:flex-col\"><div class=\"grid-cell md:col-span-1 max-md:grid grid-cols-2\"><p class=\"font-bold uppercase\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -53,7 +53,7 @@ func inputForm() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p><div class=\"justify-self-end\"><p class=\"text-sm\">Überstunden</p><p class=\"text-accent\">4h 32min</p></div></div><form id=\"timeRangeForm\" method=\"GET\" class=\"grid-cell flex flex-row col-span-3 md:col-span-3 gap-2 \">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</p><div class=\"justify-self-end\"><p class=\"text-sm\">Überstunden</p><p class=\"text-accent\">4h 32min</p></div></div><form id=\"timeRangeForm\" method=\"GET\" class=\"grid-cell flex flex-row md:col-span-3 gap-2 \">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -118,7 +118,11 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		ctx = templ.ClearChildren(ctx)

 		work, pause := workDay.GetWorkTimeString()
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"grid-sub divide-x-1 hover:bg-neutral-200 transition-colors\"><div class=\"grid-cell col-span-2 md:col-span-1 flex flex-row gap-2\">")
+		justify := ""
+		if len(workDay.Bookings) <= 1 {
+			justify = "justify-content: center"
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "<div class=\"grid-sub divide-x-1 hover:bg-neutral-200 transition-colors\"><div class=\"grid-cell md:col-span-1 flex flex-row gap-2\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -133,7 +137,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		var templ_7745c5c3_Var6 string
 		templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(workDay.Day.Format("Mon"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 47, Col: 94}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 51, Col: 94}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 		if templ_7745c5c3_Err != nil {
@@ -146,54 +150,64 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		var templ_7745c5c3_Var7 string
 		templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(workDay.Day.Format("02.01.2006"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 47, Col: 139}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 51, Col: 139}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</p><p class=\" text-sm mt-1\">Arbeitszeit:</p>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 9, "</p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if work != "" {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<p class=\" text-sm mt-1\">Arbeitszeit:</p>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if workDay.RequiresAction() {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 10, "<p class=\"text-red-600\">Bitte anpassen</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<p class=\"text-red-600\">Bitte anpassen</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			} else {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 11, "<p class=\" text-accent\">")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "<p class=\" text-accent\">")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 				var templ_7745c5c3_Var8 string
 				templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(work)
 				if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 52, Col: 35}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 57, Col: 36}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 12, "</p>")
+				templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "</p>")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 13, "<p class=\"text-neutral-500\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, " <p class=\"text-neutral-500\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var9 string
 			templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(pause)
 			if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 54, Col: 39}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 59, Col: 40}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</p></div></div><div class=\"time-component flex flex-row col-span-3 md:col-span-3 gap-2 w-full grid-cell\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "</p>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "</div></div><div class=\"time-component flex flex-row md:col-span-3 gap-2 w-full grid-cell\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -201,30 +215,58 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 15, "<form id=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<form id=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var10 string
 		templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs("time-" + workDay.Day.Format("2006-01-02"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 59, Col: 56}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 65, Col: 56}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "\" class=\"flex flex-col gap-2 justify-between group w-full\" method=\"post\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "\" class=\"flex flex-col gap-2 group w-full justify-between\" style=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		var templ_7745c5c3_Var11 string
+		templ_7745c5c3_Var11, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(justify)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 65, Col: 131}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "\" method=\"post\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if len(workDay.Bookings) <= 1 && workDay.Bookings[len(workDay.Bookings)-1].CounterId == 0 {
+			templ_7745c5c3_Err = noBookingComponent(workDay).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
 			for _, booking := range workDay.Bookings {
 				templ_7745c5c3_Err = bookingComponent(booking).Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "</form></div><div class=\"grid-cell\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, " ")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = newBookingComponent(workDay).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "</form></div><div class=\"grid-cell\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -232,7 +274,7 @@ func dayComponent(workDay models.WorkDay) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "</div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -256,25 +298,25 @@ func changeButtonComponent(id string) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var11 == nil {
-			templ_7745c5c3_Var11 = templ.NopComponent
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "<button type=\"button\" class=\"cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group\" type=\"button\" onclick=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "<button type=\"button\" class=\"cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm hover:text-white transition-colors border-neutral-900 hover:bg-neutral-700 disabled:pointer-events-none disabled:opacity-50 group\" type=\"button\" onclick=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var12 templ.ComponentScript = templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var12.Call)
+		var templ_7745c5c3_Var13 templ.ComponentScript = templ.JSFuncCall("editDay", templ.JSExpression("this"), templ.JSExpression("event"), id)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var13.Call)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 20, "\"><p class=\"hidden md:block group-[.edit]:hidden\">Ändern</p><p class=\"hidden group-[.edit]:md:block\">Submit</p><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 md:hidden\"><path d=\"m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z\"></path></svg></button>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\"><p class=\"hidden md:block group-[.edit]:hidden\">Ändern</p><p class=\"hidden group-[.edit]:md:block\">Absenden</p><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\" class=\"w-4 h-4 md:hidden\"><path class=\"group-[.edit]:hidden md:hidden\" d=\"M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325\"></path> <path class=\"hidden group-[.edit]:block md:hidden\" d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z\"></path></svg></button>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -298,9 +340,9 @@ func timeGaugeComponent(progress uint8, today bool, warning bool) templ.Componen
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var13 == nil {
-			templ_7745c5c3_Var13 = templ.NopComponent
+		templ_7745c5c3_Var14 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var14 == nil {
+			templ_7745c5c3_Var14 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)

@@ -323,65 +365,65 @@ func timeGaugeComponent(progress uint8, today bool, warning bool) templ.Componen
 			break
 		}
 		if today {
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<div class=\"flex-start flex w-2 h-full overflow-hidden rounded-full bg-neutral-300 print:hidden\">")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<div class=\"flex-start flex w-2 h-full overflow-hidden rounded-full bg-neutral-300 print:hidden\">")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var14 = []any{"flex w-full items-center justify-center overflow-hidden  rounded-full", bgColor}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var14...)
+			var templ_7745c5c3_Var15 = []any{"flex w-full items-center justify-center overflow-hidden  rounded-full", bgColor}
+			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "<div class=\"")
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			var templ_7745c5c3_Var15 string
-			templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var14).String())
-			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 1, Col: 0}
-			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
-			if templ_7745c5c3_Err != nil {
-				return templ_7745c5c3_Err
-			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 23, "\" style=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<div class=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var16 string
-			templ_7745c5c3_Var16, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(fmt.Sprintf("height: %d%%", int(progress)))
+			templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var15).String())
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 104, Col: 149}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 1, Col: 0}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "\"></div></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\" style=\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var17 string
+			templ_7745c5c3_Var17, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues(fmt.Sprintf("height: %d%%", int(progress)))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 116, Col: 149}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\"></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 		} else {
-			var templ_7745c5c3_Var17 = []any{"w-2 h-full bg-accent rounded-md", bgColor}
-			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var17...)
+			var templ_7745c5c3_Var18 = []any{"w-2 h-full bg-accent rounded-md", bgColor}
+			templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var18...)
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<div class=\"")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "<div class=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			var templ_7745c5c3_Var18 string
-			templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var17).String())
+			var templ_7745c5c3_Var19 string
+			templ_7745c5c3_Var19, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var18).String())
 			if templ_7745c5c3_Err != nil {
 				return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 1, Col: 0}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var19))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "\"></div>")
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\"></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -406,12 +448,111 @@ func lineComponent() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var19 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var19 == nil {
-			templ_7745c5c3_Var19 = templ.NopComponent
+		templ_7745c5c3_Var20 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var20 == nil {
+			templ_7745c5c3_Var20 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "<div class=\"flex flex-col w-2 py-2 items-center text-accent print:hidden\"><svg class=\"size-2\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12,2 22,12 12,22 2,12\"></polygon></svg><div class=\"w-[2px] bg-accent flex-grow -my-1\"></div><svg class=\"size-2\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12,2 22,12 12,22 2,12\"></polygon></svg></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "<div class=\"flex flex-col w-2 py-2 items-center text-accent print:hidden\"><svg class=\"size-2\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12,2 22,12 12,22 2,12\"></polygon></svg><div class=\"w-[2px] bg-accent flex-grow -my-1\"></div><svg class=\"size-2\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><polygon points=\"12,2 22,12 12,22 2,12\"></polygon></svg></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func noBookingComponent(d models.WorkDay) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var21 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var21 == nil {
+			templ_7745c5c3_Var21 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<div class=\"flex flex-col gap-2 align-center\"><select class=\"grow cursor-pointer rounded-md text-neutral-800 p-2 md:px-4 border text-center text-sm transition-colors border-neutral-900\" disabled name=\"abwesenheit\"><option value=\"0\">Abwesenheit?</option> <option value=\"1\">Urlaub</option> <option value=\"2\">Kurzarbeit</option> <option value=\"3\">Krank</option> <option value=\"4\">Kindkrank</option></select>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = newBookingComponent(d).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "</div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		return nil
+	})
+}
+
+func newBookingComponent(d models.WorkDay) templ.Component {
+	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
+		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
+			return templ_7745c5c3_CtxErr
+		}
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
+		if !templ_7745c5c3_IsBuffer {
+			defer func() {
+				templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err == nil {
+					templ_7745c5c3_Err = templ_7745c5c3_BufErr
+				}
+			}()
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var22 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var22 == nil {
+			templ_7745c5c3_Var22 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 34, "<div class=\"hidden group-[.edit]:block\"><input type=\"time\" value=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var23 string
+		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(time.Now().Format("15:04"))
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 151, Col: 55}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 35, "\" class=\"text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300\"> <button type=\"button\">Neue Buchung</button> <select><option value=\"0\" disabled>Kommen/Gehen</option> <option value=\"3\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if d.Bookings[len(d.Bookings)-1].CheckInOut%2 == 0 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 36, " selected")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 37, ">Kommen</option> <option value=\"4\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if d.Bookings[len(d.Bookings)-1].CheckInOut%2 == 1 {
+			templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 38, " selected")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 39, ">Gehen</option></select></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -435,64 +576,64 @@ func bookingComponent(booking models.Booking) templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var20 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var20 == nil {
-			templ_7745c5c3_Var20 = templ.NopComponent
+		templ_7745c5c3_Var24 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var24 == nil {
+			templ_7745c5c3_Var24 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "<div><p class=\"text-neutral-500\"><span class=\"text-neutral-700 group-[.edit]:hidden inline\">")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 40, "<div><p class=\"text-neutral-500\"><span class=\"text-neutral-700 group-[.edit]:hidden inline\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var21 string
-		templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04"))
+		var templ_7745c5c3_Var25 string
+		templ_7745c5c3_Var25, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 126, Col: 97}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 164, Col: 97}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var25))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "</span> <input name=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 41, "</span> <input disabled name=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var22 string
-		templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs("booking_" + strconv.Itoa(booking.CounterId))
+		var templ_7745c5c3_Var26 string
+		templ_7745c5c3_Var26, templ_7745c5c3_Err = templ.JoinStringErrs("booking_" + strconv.Itoa(booking.CounterId))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 127, Col: 61}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 165, Col: 70}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var26))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "\" type=\"time\" value=\"")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 42, "\" type=\"time\" value=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var23 string
-		templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04"))
+		var templ_7745c5c3_Var27 string
+		templ_7745c5c3_Var27, templ_7745c5c3_Err = templ.JoinStringErrs(booking.Timestamp.Format("15:04"))
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 127, Col: 117}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 165, Col: 126}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var27))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "\" class=\"text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300\"> ")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 43, "\" class=\"text-neutral-700 group-[.edit]:inline hidden bg-neutral-100 text-sm border border-neutral-200 rounded-md px-3 py-2 transition duration-300 ease focus:outline-none focus:border-neutral-400 hover:border-neutral-300\"> ")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		var templ_7745c5c3_Var24 string
-		templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(booking.GetBookingType())
+		var templ_7745c5c3_Var28 string
+		templ_7745c5c3_Var28, templ_7745c5c3_Err = templ.JoinStringErrs(booking.GetBookingType())
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 128, Col: 29}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `templates/timeComponents.templ`, Line: 166, Col: 29}
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var28))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "</p></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 44, "</p></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -516,12 +657,12 @@ func LegendComponent() templ.Component {
 			}()
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var25 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var25 == nil {
-			templ_7745c5c3_Var25 = templ.NopComponent
+		templ_7745c5c3_Var29 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var29 == nil {
+			templ_7745c5c3_Var29 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 33, "<div class=\"flex flex-row gap-4 md:mx-[10%] print:hidden\"><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-red-600\"></div><span>Fehler</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-orange-500\"></div><span>Arbeitszeit unter regulär</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-accent\"></div><span>Arbeitszeit vollständig</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-purple-600\"></div><span>Überstunden</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-neutral-400\"></div><span>Keine Buchungen</span></div></div>")
+		templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 45, "<div class=\"flex flex-row gap-4 md:mx-[10%] print:hidden\"><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-red-600\"></div><span>Fehler</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-orange-500\"></div><span>Arbeitszeit unter regulär</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-accent\"></div><span>Arbeitszeit vollständig</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-purple-600\"></div><span>Überstunden</span></div><div class=\"flex flex-row items-center gap-2\"><div class=\"rounded-full size-4 bg-neutral-400\"></div><span>Keine Buchungen</span></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
--- a/DB/initdb/01_create_tables.sql
+++ b/DB/initdb/01_create_tables.sql
@@ -70,6 +70,14 @@ CREATE TABLE "wochen_report" (
    UNIQUE ("personal_nummer", "woche_start")
 );

+DROP TABLE IF EXISTS "abwesenheiten";
+CREATE TABLE "abwesenheiten" (
+    "counter_id" bigserial PRIMARY KEY,
+    "card_uid" varchar(255),
+    "abwesenheit_typ" int2,
+    "datum" timestamptz(6) DEFAULT NOW()::DATE,
+    );
+
 -- Adds crypto extension

 CREATE EXTENSION IF NOT EXISTS pgcrypto;
--- a/DB/initdb/02_create_user.sh
+++ b/DB/initdb/02_create_user.sh
@@ -4,7 +4,7 @@ set -e  # Exit on error
 echo "Creating PostgreSQL user and setting permissions... $POSTGRES_USER for API user $POSTGRES_API_USER"

 psql -v ON_ERROR_STOP=1 --username "$POSTGRES_USER" --dbname "$POSTGRES_DB" <<-EOSQL
-    CREATE USER $POSTGRES_API_USER WITH ENCRYPTED PASSWORD '$POSTGRES_API_PASSWORD';
+    CREATE USER $POSTGRES_API_USER WITH ENCRYPTED PASSWORD '$POSTGRES_API_PASS';
    GRANT CONNECT ON DATABASE $POSTGRES_DB TO $POSTGRES_API_USER;
    GRANT USAGE ON SCHEMA public TO $POSTGRES_API_USER;
    GRANT SELECT, INSERT, UPDATE ON anwesenheit, personal_daten, user_password, wochen_report TO $POSTGRES_API_USER;
--- a/Docker/docker-compose.dev.yml
+++ b/Docker/docker-compose.dev.yml
@@ -20,7 +20,8 @@ services:
      - 8001:8080
  backend:
    build: ../Backend
-    image: git.letsstein.de/tom/arbeitszeit-backend:0.1.1
+    image: git.letsstein.de/tom/arbeitszeit-backend:0.0.1
+    restart: unless-stopped
    env_file:
      - .env
    environment:
--- a/Readme.md
+++ b/Readme.md
@@ -12,6 +12,20 @@ cd arbeitszeitmessung/Docker
 docker compose up -d
 ```

+## PREVIEW
+
+Zeitverwaltungsansicht (/time):
+
+![time](docs/images/time.png)
+
+Ansicht der Führungskraft (/team):
+
+![team](docs/images/team.png)
+
+Nutzeransicht (/user):
+
+![user](docs/images/user.png)
+
 ## API
 Nutzung der API
 wenn die `dev-docker-compose.yml` Datei gestartet wird, ist direkt ein SwaggerUI Server mit entsprechender Datei inbegriffen.
--- a/docs/images/team.png
+++ b/docs/images/team.png
--- a/docs/images/time.png
+++ b/docs/images/time.png
--- a/docs/images/user.png
+++ b/docs/images/user.png
Author	SHA1	Message	Date
tom	e60f19ee27	seperated create abwesenheit button + added first part of frontend logic	2025-04-02 10:44:55 +02:00
tom	0c33ae22bf	added abwesenheiten table	2025-04-02 10:44:23 +02:00
tom	8994b274e4	changed header + temporary removed empty days	2025-03-28 13:39:22 +01:00
tom	5a696788ed	/time now also uses workDay instead of grouped booking --> outsourcing to sql	2025-03-28 13:06:14 +01:00
tom	eb45a3ef75	added empty days in /team view	2025-03-28 08:23:52 +01:00
tom	b43783356f	added from and to times to team view fixes #4 , #5	2025-03-27 12:21:58 +01:00
tom	d9e0bd7bdf	changed difference	2025-03-26 14:42:31 +01:00
tom	f3562de8b5	CHANGE: added images to Readme.md	2025-03-06 21:52:23 +01:00
tom	fbb1dbc1ea	CHANGE: added version 0.0.1 to docker compose	2025-03-06 21:34:08 +01:00