Spaces:
Sleeping
Sleeping
File size: 4,791 Bytes
d467ea7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
"""MonsterUI Help Desk Example - Professional Dashboard with DaisyUI components"""
from fasthtml.common import *
from monsterui.all import *
from datetime import datetime
app, rt = fast_app(hdrs=Theme.blue.headers(daisy=True))
def TicketSteps(step):
return Steps(
LiStep("Submitted", data_content="📝",
cls=StepT.success if step > 0 else StepT.primary if step == 0 else StepT.neutral),
LiStep("In Review", data_content="🔎",
cls=StepT.success if step > 1 else StepT.primary if step == 1 else StepT.neutral),
LiStep("Processing", data_content="⚙️",
cls=StepT.success if step > 2 else StepT.primary if step == 2 else StepT.neutral),
LiStep("Resolved", data_content="✅",
cls=StepT.success if step > 3 else StepT.primary if step == 3 else StepT.neutral),
cls="w-full")
def StatusBadge(status):
styles = {'high': AlertT.error, 'medium': AlertT.warning,'low': AlertT.info}
alert_type = styles.get(status, AlertT.info)
return Alert(f"{status.title()} Priority", cls=(alert_type,"w-32 shadow-sm"))
def TicketCard(id, title, description, status, step, department):
return Card(
CardHeader(
DivFullySpaced(
Div(H3(f"#{id}", cls=TextT.muted),
H4(title),
cls='space-y-2'),
StatusBadge(status))),
CardBody(
P(description, cls=(TextT.muted, "mb-6")),
DividerSplit(cls="my-6"),
TicketSteps(step),
DividerSplit(cls="my-6"),
DivFullySpaced(
Div(Strong("Department"),
P(department),
cls=('space-y-3', TextPresets.muted_sm)),
Div(Strong("Last Updated"),
P(Time(datetime.now().strftime('%b %d, %H:%M'))),
cls=('space-y-3', TextPresets.muted_sm)),
Button("View Details", cls=ButtonT.primary),
cls='mt-6')),
cls=CardT.hover)
def NewTicketModal():
return Modal(
ModalHeader(H3("Create New Support Ticket")),
ModalBody(
Alert(
DivLAligned(UkIcon("info"), Span("Please provide as much detail as possible to help us assist you quickly.")),
cls=(AlertT.info,"mb-4")),
Form(
Grid(LabelInput("Title", id="title", placeholder="Brief description of your issue"),
LabelSelect(Options("IT Support", "HR", "Facilities", "Finance"), label="Department", id="department")),
LabelSelect(Options("Low", "Medium", "High"), label="Priority Level", id="priority"),
LabelTextArea("Description", id="description", placeholder="Please provide detailed information about your issue"),
DivRAligned(
Button("Cancel", cls=ButtonT.ghost, data_uk_toggle="target: #new-ticket"),
Button(Loading(cls=LoadingT.spinner), "Submit Ticket", cls=ButtonT.primary, data_uk_toggle="target: #success-toast; target: #new-ticket")),
cls='space-y-8')),
id="new-ticket")
@rt
def index():
tickets = [
{'id': "TK-1001", 'title': "Cloud Storage Access Error",
'description': "Unable to access cloud storage with persistent authorization errors. Multiple users affected across marketing department.",
'status': 'high', 'step': 2, 'department': 'IT Support'},
{'id': "TK-1002", 'title': "Email Integration Issue",
'description': "Exchange server not syncing with mobile devices. Affecting external client communications.",
'status': 'medium', 'step': 1, 'department': 'IT Support'},
{'id': "TK-1003", 'title': "Office Equipment Setup",
'description': "New department printer needs configuration and network integration. Required for upcoming client presentation.",
'status': 'low', 'step': 0, 'department': 'Facilities'}
]
return Title("Help Desk Dashboard"), Container(
Section(
DivFullySpaced(
H2("Active Tickets"),
Button(UkIcon("plus-circle", cls="mr-2"), "New Ticket", cls=ButtonT.primary, data_uk_toggle="target: #new-ticket"),
cls='mb-8'),
Grid(*[TicketCard(**ticket) for ticket in tickets], cols=1),
cls="my-6"),
NewTicketModal(),
Toast(DivLAligned(UkIcon('check-circle', cls='mr-2'), "Ticket submitted successfully! Our team will review it shortly."), id="success-toast", alert_cls=AlertT.success, cls=(ToastHT.end, ToastVT.bottom)),
Loading(htmx_indicator=True, type=LoadingT.dots, cls="fixed top-0 right-0 m-4"),
cls="mx-auto max-w-7xl"
)
serve() |