Fix booking count filters, add admin notifications, and improve bookings
UI
This commit is contained in:
@@ -0,0 +1,224 @@
|
||||
package bookings
|
||||
|
||||
import (
|
||||
"crussell/db"
|
||||
"crussell/mw"
|
||||
"database/sql"
|
||||
"encoding/json"
|
||||
"log"
|
||||
"net/http"
|
||||
"time"
|
||||
|
||||
"github.com/go-chi/chi/v5"
|
||||
)
|
||||
|
||||
// UserCancelBookingHandler allows an authenticated user to cancel a booking they own.
|
||||
// The update is performed in a single statement with appropriate conditions.
|
||||
func UserCancelBookingHandler(w http.ResponseWriter, r *http.Request) {
|
||||
bookingID := chi.URLParam(r, "id")
|
||||
|
||||
userID, ok := r.Context().Value(mw.UserIDKey).(string)
|
||||
if !ok || userID == "" {
|
||||
http.Error(w, "Authentication required", http.StatusUnauthorized)
|
||||
return
|
||||
}
|
||||
|
||||
res, err := db.DB.Exec(r.Context(), `
|
||||
UPDATE bookings
|
||||
SET status = 'client_cancelled', updated_at = $1
|
||||
WHERE id = $2 AND user_id = $3 AND status IN ('pending', 'confirmed', 'in_progress')
|
||||
`, time.Now(), bookingID, userID)
|
||||
if err != nil {
|
||||
log.Printf("Failed to cancel booking %s: %v", bookingID, err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
rowsAffected := res.RowsAffected()
|
||||
if rowsAffected == 0 {
|
||||
http.Error(w, "Booking not cancellable", http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
}
|
||||
|
||||
// AdminCancelBookingHandler allows an admin to cancel any booking.
|
||||
// The update uses a status filter and checks RowsAffected for existence.
|
||||
func AdminCancelBookingHandler(w http.ResponseWriter, r *http.Request) {
|
||||
bookingID := chi.URLParam(r, "id")
|
||||
|
||||
res, err := db.DB.Exec(r.Context(), `
|
||||
UPDATE bookings
|
||||
SET status = 'we_cancelled', updated_at = $1
|
||||
WHERE id = $2 AND status IN ('pending', 'confirmed', 'in_progress')
|
||||
`, time.Now(), bookingID)
|
||||
if err != nil {
|
||||
log.Printf("Failed to admin cancel booking %s: %v", bookingID, err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
rowsAffected := res.RowsAffected()
|
||||
if rowsAffected == 0 {
|
||||
http.Error(w, "Booking not cancellable", http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
}
|
||||
|
||||
// AdminListPendingBookingsHandler returns all bookings with status `pending` by delegating to the existing admin list handler.
|
||||
func AdminListPendingBookingsHandler(w http.ResponseWriter, r *http.Request) {
|
||||
r = r.Clone(r.Context())
|
||||
q := r.URL.Query()
|
||||
q.Set("status", "pending")
|
||||
r.URL.RawQuery = q.Encode()
|
||||
|
||||
GetAllAdminBookingsHandler(w, r)
|
||||
}
|
||||
|
||||
// AdminGetInProgressBookingHandler returns the booking that is currently in progress.
|
||||
// It joins the bookings table with users to populate the UserSummary in the returned Booking.
|
||||
func AdminGetInProgressBookingHandler(w http.ResponseWriter, r *http.Request) {
|
||||
var b Booking
|
||||
var userID, fullName string
|
||||
|
||||
err := db.DB.QueryRow(r.Context(), `
|
||||
SELECT
|
||||
b.id,
|
||||
b.start_time,
|
||||
b.status,
|
||||
b.notes,
|
||||
b.created_at,
|
||||
b.updated_at,
|
||||
b.created_by,
|
||||
u.id,
|
||||
u.fn
|
||||
FROM bookings b
|
||||
LEFT JOIN users u ON b.user_id = u.id
|
||||
WHERE b.status = 'in_progress'
|
||||
ORDER BY b.start_time
|
||||
LIMIT 1
|
||||
`).Scan(
|
||||
&b.ID,
|
||||
&b.StartTime,
|
||||
&b.Status,
|
||||
&b.Notes,
|
||||
&b.CreatedAt,
|
||||
&b.UpdatedAt,
|
||||
&b.CreatedBy,
|
||||
&userID,
|
||||
&fullName,
|
||||
)
|
||||
if err != nil {
|
||||
if err == sql.ErrNoRows {
|
||||
http.Error(w, "No in-progress booking found", http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
log.Printf("Failed to fetch in-progress booking: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
// Populate the UserSummary field
|
||||
b.User = &UserSummary{
|
||||
ID: userID,
|
||||
FullName: fullName,
|
||||
FirstName: "", // not available here
|
||||
LastName: "", // not available here
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
if err := json.NewEncoder(w).Encode(b); err != nil {
|
||||
log.Printf("Failed to encode booking response: %v", err)
|
||||
}
|
||||
}
|
||||
|
||||
// AdminEditBookingHandler allows an admin to modify the start time of any booking.
|
||||
// It validates the new start time and returns 404 if the booking does not exist.
|
||||
func AdminEditBookingHandler(w http.ResponseWriter, r *http.Request) {
|
||||
bookingID := chi.URLParam(r, "id")
|
||||
var req EditBookingRequest
|
||||
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
|
||||
http.Error(w, "Invalid request body", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
// Basic validation: ensure the new time is not in the past
|
||||
if time.Now().After(req.StartTime) {
|
||||
http.Error(w, "Start time must be in the future", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
res, err := db.DB.Exec(r.Context(), `
|
||||
UPDATE bookings
|
||||
SET start_time = $1, updated_at = $2
|
||||
WHERE id = $3
|
||||
`, req.StartTime, time.Now(), bookingID)
|
||||
if err != nil {
|
||||
log.Printf("Failed to edit booking %s: %v", bookingID, err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
rowsAffected := res.RowsAffected()
|
||||
if rowsAffected == 0 {
|
||||
http.Error(w, "Booking not found", http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
|
||||
w.WriteHeader(http.StatusNoContent)
|
||||
}
|
||||
|
||||
// AdminCreateBookingForUserHandler creates a booking on behalf of a user.
|
||||
func AdminCreateBookingForUserHandler(w http.ResponseWriter, r *http.Request) {
|
||||
userID := chi.URLParam(r, "user_id")
|
||||
var req CreateBookingRequest
|
||||
if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
|
||||
http.Error(w, "Invalid request body", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
adminID, _ := r.Context().Value(mw.UserIDKey).(string)
|
||||
|
||||
tx, err := db.DB.Begin(r.Context())
|
||||
if err != nil {
|
||||
log.Printf("Failed to begin transaction: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
defer tx.Rollback(r.Context())
|
||||
|
||||
var bookingID string
|
||||
err = tx.QueryRow(r.Context(), `
|
||||
INSERT INTO bookings (id, user_id, start_time, status, created_by)
|
||||
VALUES (generate_booking_id(), $1, $2, 'pending', $3)
|
||||
RETURNING id
|
||||
`, userID, req.StartTime, adminID).Scan(&bookingID)
|
||||
if err != nil {
|
||||
log.Printf("Failed to create booking: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
for _, svcID := range req.ServiceIDs {
|
||||
if _, err := tx.Exec(r.Context(), `
|
||||
INSERT INTO booking_services (booking_id, service_id)
|
||||
VALUES ($1, $2)
|
||||
`, bookingID, svcID); err != nil {
|
||||
log.Printf("Failed to insert booking service: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
if err = tx.Commit(r.Context()); err != nil {
|
||||
log.Printf("Failed to commit transaction: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
w.WriteHeader(http.StatusCreated)
|
||||
if err := json.NewEncoder(w).Encode(map[string]string{"id": bookingID}); err != nil {
|
||||
log.Printf("Failed to encode response: %v", err)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,175 @@
|
||||
package notifications
|
||||
|
||||
import (
|
||||
"crussell/db"
|
||||
"database/sql"
|
||||
"encoding/json"
|
||||
"fmt"
|
||||
"log"
|
||||
"net/http"
|
||||
"strconv"
|
||||
"time"
|
||||
|
||||
"github.com/go-chi/chi/v5"
|
||||
)
|
||||
|
||||
// Structs returned in JSON
|
||||
type AdminNotification struct {
|
||||
ID int `json:"id"`
|
||||
Reason string `json:"reason"`
|
||||
BookingID *int `json:"booking_id,omitempty"`
|
||||
UserID *int `json:"user_id,omitempty"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
}
|
||||
|
||||
type AdminNotificationListResponse struct {
|
||||
Notifications []AdminNotification `json:"notifications"`
|
||||
Page int `json:"page"`
|
||||
PerPage int `json:"per_page"`
|
||||
Total int `json:"total"`
|
||||
}
|
||||
|
||||
// GET /api/admin/notifications
|
||||
func GetNotifications(w http.ResponseWriter, r *http.Request) {
|
||||
// Parse query params
|
||||
page := 1
|
||||
perPage := 20
|
||||
|
||||
if p, err := strconv.Atoi(r.URL.Query().Get("page")); err == nil && p > 0 {
|
||||
page = p
|
||||
}
|
||||
if pp, err := strconv.Atoi(r.URL.Query().Get("per_page")); err == nil && pp > 0 {
|
||||
perPage = pp
|
||||
}
|
||||
|
||||
reasonFilter := r.URL.Query().Get("reason")
|
||||
|
||||
baseQuery := `
|
||||
SELECT id, reason, booking_id, user_id, created_at
|
||||
FROM admin_notifications
|
||||
WHERE acknowledged_at IS NULL
|
||||
`
|
||||
countQuery := `
|
||||
SELECT COUNT(*) FROM admin_notifications
|
||||
WHERE acknowledged_at IS NULL
|
||||
`
|
||||
|
||||
args := []any{}
|
||||
countArgs := []any{}
|
||||
param := 1
|
||||
|
||||
// Optional reason filter
|
||||
if reasonFilter != "" {
|
||||
baseQuery += fmt.Sprintf(" AND reason = $%d", param)
|
||||
countQuery += fmt.Sprintf(" AND reason = $%d", param)
|
||||
args = append(args, reasonFilter)
|
||||
countArgs = append(countArgs, reasonFilter)
|
||||
param++
|
||||
}
|
||||
|
||||
// ORDER & pagination
|
||||
baseQuery += " ORDER BY created_at DESC"
|
||||
baseQuery += fmt.Sprintf(" LIMIT $%d OFFSET $%d", param, param+1)
|
||||
args = append(args, perPage, (page-1)*perPage)
|
||||
|
||||
// Count
|
||||
var total int
|
||||
err := db.DB.QueryRow(r.Context(), countQuery, countArgs...).Scan(&total)
|
||||
if err != nil {
|
||||
log.Printf("Failed to count notifications: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
// Query
|
||||
rows, err := db.DB.Query(r.Context(), baseQuery, args...)
|
||||
if err != nil {
|
||||
log.Printf("Failed to fetch notifications: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
defer rows.Close()
|
||||
|
||||
notifications := []AdminNotification{}
|
||||
|
||||
for rows.Next() {
|
||||
var n AdminNotification
|
||||
var bookingID sql.NullInt32
|
||||
var userID sql.NullInt32
|
||||
|
||||
err := rows.Scan(
|
||||
&n.ID,
|
||||
&n.Reason,
|
||||
&bookingID,
|
||||
&userID,
|
||||
&n.CreatedAt,
|
||||
)
|
||||
if err != nil {
|
||||
log.Printf("Failed to scan notification row: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
if bookingID.Valid {
|
||||
id := int(bookingID.Int32)
|
||||
n.BookingID = &id
|
||||
}
|
||||
if userID.Valid {
|
||||
id := int(userID.Int32)
|
||||
n.UserID = &id
|
||||
}
|
||||
|
||||
notifications = append(notifications, n)
|
||||
}
|
||||
|
||||
resp := AdminNotificationListResponse{
|
||||
Notifications: notifications,
|
||||
Page: page,
|
||||
PerPage: perPage,
|
||||
Total: total,
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
if err := json.NewEncoder(w).Encode(resp); err != nil {
|
||||
log.Printf("Failed to encode response: %v", err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
func AcknowledgeNotification(w http.ResponseWriter, r *http.Request) {
|
||||
idStr := chi.URLParam(r, "id")
|
||||
if idStr == "" {
|
||||
http.Error(w, "Notification ID is required", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
id, err := strconv.Atoi(idStr)
|
||||
if err != nil {
|
||||
http.Error(w, "Invalid notification ID", http.StatusBadRequest)
|
||||
return
|
||||
}
|
||||
|
||||
query := `
|
||||
UPDATE admin_notifications
|
||||
SET acknowledged_at = NOW()
|
||||
WHERE id = $1 AND acknowledged_at IS NULL
|
||||
`
|
||||
|
||||
cmdTag, err := db.DB.Exec(r.Context(), query, id)
|
||||
if err != nil {
|
||||
log.Printf("Failed to acknowledge notification %d: %v", id, err)
|
||||
http.Error(w, "Internal server error", http.StatusInternalServerError)
|
||||
return
|
||||
}
|
||||
|
||||
if cmdTag.RowsAffected() == 0 {
|
||||
http.Error(w, "Notification not found or already acknowledged", http.StatusNotFound)
|
||||
return
|
||||
}
|
||||
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
json.NewEncoder(w).Encode(map[string]string{
|
||||
"status": "ok",
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,448 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { authStore } from '$lib/stores/auth.svelte';
|
||||
import { browser } from '$app/environment';
|
||||
|
||||
// shadcn-svelte components
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import { Skeleton } from '$lib/components/ui/skeleton';
|
||||
import { Separator } from '$lib/components/ui/separator';
|
||||
|
||||
// =============== Auth & Permissions ===============
|
||||
let pageState = $state<'loading' | 'authorized' | 'unauthorized'>('loading');
|
||||
|
||||
// Check permissions immediately and on auth changes
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
|
||||
if (authStore.isLoading) {
|
||||
pageState = 'loading';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!authStore.isAuthenticated) {
|
||||
pageState = 'unauthorized';
|
||||
goto('/login', { replaceState: true });
|
||||
return;
|
||||
}
|
||||
|
||||
if (authStore.currentUser?.role !== 'admin') {
|
||||
pageState = 'unauthorized';
|
||||
goto('/', { replaceState: true });
|
||||
return;
|
||||
}
|
||||
|
||||
pageState = 'authorized';
|
||||
});
|
||||
|
||||
// =============== Pending Bookings State ===============
|
||||
type Booking = {
|
||||
id: string;
|
||||
start_time: string;
|
||||
status:
|
||||
| 'pending'
|
||||
| 'confirmed'
|
||||
| 'in_progress'
|
||||
| 'completed'
|
||||
| 'client_cancelled'
|
||||
| 'we_cancelled'
|
||||
| 're-schedule'
|
||||
| 'no_show';
|
||||
notes?: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
user?: {
|
||||
id: string;
|
||||
full_name: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
};
|
||||
services: Array<{
|
||||
service_name?: string;
|
||||
price?: number;
|
||||
duration_minutes?: number;
|
||||
}>;
|
||||
total_amount: number;
|
||||
amount_paid: number;
|
||||
amount_due: number;
|
||||
duration_minutes: number;
|
||||
};
|
||||
|
||||
let pendingBookings = $state<Booking[]>([]);
|
||||
let loadingBookings = $state(true);
|
||||
|
||||
// Fetch pending bookings
|
||||
async function fetchPendingBookings() {
|
||||
if (pageState !== 'authorized') return;
|
||||
|
||||
loadingBookings = true;
|
||||
try {
|
||||
const response = await fetch('/api/admin/bookings?status=pending', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: `Bearer ${authStore.currentToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
|
||||
if (data.bookings && data.bookings.length > 0) {
|
||||
pendingBookings = data.bookings
|
||||
.filter((b) => b.status === 'pending')
|
||||
.map((b) => ({
|
||||
id: b.id,
|
||||
start_time: b.start_time,
|
||||
status: b.status,
|
||||
notes: b.notes,
|
||||
created_at: b.created_at,
|
||||
updated_at: b.updated_at,
|
||||
user: b.user
|
||||
? {
|
||||
id: b.user.id,
|
||||
full_name: b.user.full_name,
|
||||
email: b.user.email,
|
||||
phone: b.user.phone
|
||||
}
|
||||
: undefined,
|
||||
services: b.services || [],
|
||||
total_amount: b.total_amount || 0,
|
||||
amount_paid: b.amount_paid || 0,
|
||||
amount_due: b.amount_due || 0,
|
||||
duration_minutes: b.duration_minutes || 0
|
||||
}));
|
||||
} else {
|
||||
pendingBookings = [];
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to fetch pending bookings:', response.status);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error fetching pending bookings:', err);
|
||||
} finally {
|
||||
loadingBookings = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch bookings when authorized
|
||||
$effect(() => {
|
||||
if (pageState === 'authorized') {
|
||||
fetchPendingBookings();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if pageState === 'loading'}
|
||||
<!-- Full page skeleton loading -->
|
||||
<div class="mx-auto max-w-6xl space-y-6 p-6">
|
||||
<!-- Header Skeleton -->
|
||||
<div class="mb-8 flex items-center justify-center text-center">
|
||||
<div class="space-y-2">
|
||||
<Skeleton class="h-8 w-64" />
|
||||
<Skeleton class="h-4 w-96" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Grid Skeleton -->
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{#each Array(3) as _, i (i)}
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Skeleton class="h-6 w-32" />
|
||||
<Skeleton class="h-4 w-48" />
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<Skeleton class="h-32 w-full" />
|
||||
<div class="flex justify-end">
|
||||
<Skeleton class="h-10 w-24" />
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Table Skeleton -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Skeleton class="h-6 w-32" />
|
||||
<Skeleton class="h-4 w-64" />
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<Skeleton class="h-10 w-32" />
|
||||
<Skeleton class="h-10 w-24" />
|
||||
</div>
|
||||
<div class="hidden w-full overflow-x-auto md:block">
|
||||
<table class="w-full table-auto border-collapse text-sm">
|
||||
<thead>
|
||||
<tr class="border-b text-left text-xs text-gray-500">
|
||||
{#each Array(4) as _, i (i)}
|
||||
<th class="py-3"><Skeleton class="h-4 w-20" /></th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each Array(5) as _, i (i)}
|
||||
<tr class="border-b">
|
||||
{#each Array(4) as _, j (j)}
|
||||
<td class="py-3"><Skeleton class="h-4 w-24" /></td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{:else if pageState === 'authorized'}
|
||||
<!-- Main Dashboard Content -->
|
||||
<div class="mx-auto max-w-6xl space-y-6 p-6">
|
||||
<!-- Header -->
|
||||
<div class="mb-8 flex items-center justify-center text-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Needs Attention</h1>
|
||||
<p class="text-gray-600">Pending bookings requiring confirmation or action</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards Example -->
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="16" y1="2" x2="16" y2="6" />
|
||||
<line x1="8" y1="2" x2="8" y2="6" />
|
||||
<line x1="3" y1="10" x2="21" y2="10" />
|
||||
</svg>
|
||||
Pending Bookings
|
||||
</Card.Title>
|
||||
<Card.Description>Awaiting confirmation</Card.Description>
|
||||
</div>
|
||||
<div class="rounded-full bg-amber-100 px-3 py-1">
|
||||
<span class="text-lg font-bold text-amber-700">
|
||||
{loadingBookings ? '...' : pendingBookings.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Main Content Cards -->
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<!-- Example Management Card 1 -->
|
||||
<Card.Root class="h-full">
|
||||
<Card.Header>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<Card.Title>Recent Activity</Card.Title>
|
||||
<Card.Description>Latest actions and updates</Card.Description>
|
||||
</div>
|
||||
<Button variant="outline" size="sm">View All</Button>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
{#each Array(4) as _, i (i)}
|
||||
<div class="flex items-center justify-between rounded bg-gray-50 p-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-10 w-10 rounded-full bg-gray-200"></div>
|
||||
<div>
|
||||
<div class="font-medium">Activity {i + 1}</div>
|
||||
<div class="text-xs text-gray-500">2 hours ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm">View</Button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
|
||||
<!-- Example Management Card 2 -->
|
||||
<Card.Root class="h-full">
|
||||
<Card.Header>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<Card.Title>Quick Actions</Card.Title>
|
||||
<Card.Description>Common administrative tasks</Card.Description>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-3">
|
||||
<Button class="w-full justify-start" variant="outline">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
Add New Item
|
||||
</Button>
|
||||
<Button class="w-full justify-start" variant="outline">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
Edit Settings
|
||||
</Button>
|
||||
<Button class="w-full justify-start" variant="outline">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
|
||||
<polyline points="7 10 12 15 17 10" />
|
||||
<line x1="12" y1="15" x2="12" y2="3" />
|
||||
</svg>
|
||||
Export Data
|
||||
</Button>
|
||||
<Button class="w-full justify-start" variant="outline">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path
|
||||
d="M12 1v6m0 6v6m5.2-13.2l-4.2 4.2m0 6l4.2 4.2M23 12h-6m-6 0H1m20.2-5.2l-4.2 4.2m0 6l4.2 4.2"
|
||||
/>
|
||||
</svg>
|
||||
View Reports
|
||||
</Button>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Data Table Example -->
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<Card.Title>Data Management</Card.Title>
|
||||
<Card.Description>View and manage your data</Card.Description>
|
||||
</div>
|
||||
<Button>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-2 h-4 w-4"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
Add New
|
||||
</Button>
|
||||
</div>
|
||||
</Card.Header>
|
||||
|
||||
<Card.Content class="space-y-4">
|
||||
<!-- Desktop Table -->
|
||||
<div class="hidden w-full overflow-x-auto md:block">
|
||||
<table class="w-full table-auto border-collapse text-sm">
|
||||
<thead>
|
||||
<tr class="border-b text-left text-xs text-gray-500">
|
||||
<th class="py-3 font-medium">Name</th>
|
||||
<th class="py-3 font-medium">Status</th>
|
||||
<th class="py-3 font-medium">Date</th>
|
||||
<th class="py-3 text-center font-medium">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each Array(5) as _, i (i)}
|
||||
<tr class="border-b hover:bg-gray-50">
|
||||
<td class="py-3 font-medium">Item {i + 1}</td>
|
||||
<td class="py-3">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {i %
|
||||
2 ===
|
||||
0
|
||||
? 'bg-emerald-100 text-emerald-800'
|
||||
: 'bg-amber-100 text-amber-800'}"
|
||||
>
|
||||
{i % 2 === 0 ? 'Active' : 'Pending'}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-3 text-gray-600">2024-01-{String(i + 1).padStart(2, '0')}</td>
|
||||
<td class="py-3">
|
||||
<div class="flex justify-center gap-2">
|
||||
<Button variant="outline" size="sm">Edit</Button>
|
||||
<Button variant="destructive" size="sm">Delete</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Cards -->
|
||||
<div class="space-y-4 md:hidden">
|
||||
{#each Array(5) as _, i (i)}
|
||||
<div class="rounded-lg border p-4 hover:bg-gray-50">
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start justify-between">
|
||||
<h3 class="font-medium">Item {i + 1}</h3>
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {i %
|
||||
2 ===
|
||||
0
|
||||
? 'bg-emerald-100 text-emerald-800'
|
||||
: 'bg-amber-100 text-amber-800'}"
|
||||
>
|
||||
{i % 2 === 0 ? 'Active' : 'Pending'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-gray-600">
|
||||
Date: 2024-01-{String(i + 1).padStart(2, '0')}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-2">
|
||||
<Button variant="outline" size="sm" class="flex-1">Edit</Button>
|
||||
<Button variant="destructive" size="sm" class="flex-1">Delete</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user