Added issues dashboard

pkg/web/routes/issue_detail.templ

@@ -1,14 +1,15 @@
 package routes
 
 import (
-	"fmt"
 	"github.com/LazyBachelor/LazyPM/internal/models"
 	"github.com/LazyBachelor/LazyPM/pkg/web/components"
 )
 
 type IssueDetailProps struct {
-	Issue    models.Issue
-	Comments []*models.Comment
+	Issue           models.Issue
+	DisplayOwner    string
+	DisplayAssignee string
+	Comments        []*models.Comment
 }
 
 templ IssueDetailContent(props IssueDetailProps) {
@@ -25,49 +26,8 @@ templ IssueDetailContent(props IssueDetailProps) {
 				Back to Issues
 			</a>
 		</div>
-		<div class="card bg-base-100 shadow-lg mb-6">
-			<div class="card-body">
-				<div class="flex items-start justify-between">
-					<div>
-						<span class="badge badge-neutral font-mono">{ props.Issue.ID }</span>
-						<h1 class="text-2xl font-bold mt-2">{ props.Issue.Title }</h1>
-					</div>
-					<div class="flex gap-2">
-						@StatusBadge(props.Issue.Status)
-						@TypeBadge(props.Issue.IssueType)
-						@PriorityBadge(props.Issue.Priority)
-					</div>
-				</div>
-				if props.Issue.Description != "" {
-					<div class="mt-4">
-						<h3 class="text-sm font-semibold text-base-content/70 mb-2">Description</h3>
-						<p class="whitespace-pre-wrap">{ props.Issue.Description }</p>
-					</div>
-				}
-				<div class="divider"></div>
-				<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-					<div>
-						<span class="text-base-content/60">Created</span>
-						<p class="font-medium">{ props.Issue.CreatedAt.Format("Jan 2, 2006") }</p>
-					</div>
-					<div>
-						<span class="text-base-content/60">Updated</span>
-						<p class="font-medium">{ props.Issue.UpdatedAt.Format("Jan 2, 2006") }</p>
-					</div>
-					if props.Issue.Assignee != "" {
-						<div>
-							<span class="text-base-content/60">Assignee</span>
-							<p class="font-medium">{ props.Issue.Assignee }</p>
-						</div>
-					}
-					if props.Issue.Owner != "" {
-						<div>
-							<span class="text-base-content/60">Owner</span>
-							<p class="font-medium">{ props.Issue.Owner }</p>
-						</div>
-					}
-				</div>
-			</div>
+		<div class="mb-6">
+			@components.IssueDetailCard(components.IssueDetailCardProps{Issue: props.Issue, DisplayOwner: props.DisplayOwner, DisplayAssignee: props.DisplayAssignee})
 		</div>
 		@components.CommentSection(components.CommentSectionProps{
 			IssueID:  props.Issue.ID,
@@ -81,54 +41,3 @@ templ IssueDetail(props IssueDetailProps) {
 		@IssueDetailContent(props)
 	}
 }
-
-templ StatusBadge(status models.Status) {
-	switch status {
-		case "open":
-			<span class="badge badge-info">Open</span>
-		case "in_progress":
-			<span class="badge badge-warning">In Progress</span>
-		case "closed":
-			<span class="badge badge-success">Closed</span>
-		case "blocked":
-			<span class="badge badge-error">Blocked</span>
-		case "deferred":
-			<span class="badge badge-ghost">Deferred</span>
-		default:
-			<span class="badge">{ string(status) }</span>
-	}
-}
-
-templ TypeBadge(issueType models.IssueType) {
-	switch issueType {
-		case "bug":
-			<span class="badge badge-error badge-outline">Bug</span>
-		case "feature":
-			<span class="badge badge-success badge-outline">Feature</span>
-		case "task":
-			<span class="badge badge-info badge-outline">Task</span>
-		case "chore":
-			<span class="badge badge-warning badge-outline">Chore</span>
-		case "epic":
-			<span class="badge badge-primary badge-outline">Epic</span>
-		default:
-			<span class="badge badge-outline">{ string(issueType) }</span>
-	}
-}
-
-templ PriorityBadge(priority int) {
-	switch priority {
-		case 0:
-			<span class="badge badge-error">P0 - Critical</span>
-		case 1:
-			<span class="badge badge-warning">P1 - High</span>
-		case 2:
-			<span class="badge badge-info">P2 - Medium</span>
-		case 3:
-			<span class="badge badge-ghost">P3 - Low</span>
-		case 4:
-			<span class="badge badge-ghost badge-outline">P4 - Minimal</span>
-		default:
-			<span class="badge">{ fmt.Sprintf("P%d", priority) }</span>
-	}
-}