diff --git a/lib/modules/customer_service/web/details.html.heex b/lib/modules/customer_service/web/details.html.heex index 63cd2cdb0..a93194ddd 100644 --- a/lib/modules/customer_service/web/details.html.heex +++ b/lib/modules/customer_service/web/details.html.heex @@ -1,222 +1,138 @@ -
- <.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets")} /> + +
+ <.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets")} /> -
- <%!-- Main Content --%> -
- <%!-- Ticket Info Card --%> -
-
-
-
-

{@ticket.title}

-
- #{String.slice(@ticket.uuid, 0, 8)} - • - Created {Calendar.strftime(@ticket.inserted_at, "%Y-%m-%d %H:%M")} +
+ <%!-- Main Content --%> +
+ <%!-- Ticket Info Card --%> +
+
+
+
+

{@ticket.title}

+
+ #{String.slice(@ticket.uuid, 0, 8)} + • + Created {Calendar.strftime(@ticket.inserted_at, "%Y-%m-%d %H:%M")} +
+
+
+ <.link + navigate={ + PhoenixKit.Utils.Routes.path( + "/admin/customer-service/tickets/#{@ticket.uuid}/edit" + ) + } + class="btn btn-outline btn-sm" + > + Edit +
-
- <.link - navigate={ - PhoenixKit.Utils.Routes.path( - "/admin/customer-service/tickets/#{@ticket.uuid}/edit" - ) - } - class="btn btn-outline btn-sm" - > - Edit - -
-
- -
- - <%!-- Description --%> -
-

{@ticket.description}

-
- <%!-- Attachments Section --%> - <%= if @attachments_enabled do %>
-
-

Attachments ({length(@attachments)})

- + + <%!-- Description --%> +
+

{@ticket.description}

- <%= if Enum.any?(@attachments) do %> -
- <%= for attachment <- @attachments do %> -
- <%= if attachment.file do %> - <%= if attachment.file.file_type == "image" do %> - {attachment.caption - <% else %> -
- <.icon name="hero-document" class="w-8 h-8 text-base-content/50" /> -
- <% end %> -
-
{attachment.file.original_file_name}
-
- - <% end %> -
- <% end %> -
- <% else %> -
- No attachments yet. Click "Add Files" to attach files. + <%!-- Attachments Section --%> + <%= if @attachments_enabled do %> +
+
+

Attachments ({length(@attachments)})

+
- <% end %> - <% end %> -
-
- <%!-- Public Comments Section --%> -
-
-

Comments ({length(@public_comments)})

- - <%!-- Comments List --%> -
- <%= if Enum.empty?(@public_comments) do %> -
- No comments yet. Be the first to respond. -
- <% else %> - <%= for comment <- @public_comments do %> -
-
-
- <.user_avatar user={comment.user} size="sm" /> -
- {comment.user.email} - - {Calendar.strftime(comment.inserted_at, "%Y-%m-%d %H:%M")} - -
+ <%= if Enum.any?(@attachments) do %> +
+ <%= for attachment <- @attachments do %> +
+ <%= if attachment.file do %> + <%= if attachment.file.file_type == "image" do %> + {attachment.caption + <% else %> +
+ <.icon name="hero-document" class="w-8 h-8 text-base-content/50" /> +
+ <% end %> +
+
{attachment.file.original_file_name}
+
+ + <% end %>
- -
-
{comment.content}
+ <% end %> +
+ <% else %> +
+ No attachments yet. Click "Add Files" to attach files.
<% end %> <% end %>
- - <%!-- Add Comment Form --%> -
-
- - -
- -
-
-
- <%!-- Internal Notes Section (Staff Only) --%> - <%= if @can_view_internal and @internal_notes_enabled do %> -
+ <%!-- Public Comments Section --%> +
-
- - - -

- Internal Notes ({length(@internal_notes)}) -

- Staff Only -
+

Comments ({length(@public_comments)})

- <%!-- Internal Notes List --%> + <%!-- Comments List --%>
- <%= if Enum.empty?(@internal_notes) do %> -
- No internal notes yet. + <%= if Enum.empty?(@public_comments) do %> +
+ No comments yet. Be the first to respond.
<% else %> - <%= for note <- @internal_notes do %> -
+ <%= for comment <- @public_comments do %> +
- <.user_avatar user={note.user} size="sm" /> + <.user_avatar user={comment.user} size="sm" />
- {note.user.email} + {comment.user.email} - {Calendar.strftime(note.inserted_at, "%Y-%m-%d %H:%M")} + {Calendar.strftime(comment.inserted_at, "%Y-%m-%d %H:%M")}
-
{note.content}
+
{comment.content}
<% end %> <% end %>
- <%!-- Add Internal Note Form --%> + <%!-- Add Comment Form --%>
- +
-
- <% end %> -
- <%!-- Sidebar --%> -
- <%!-- Status & Actions Card --%> -
-
-

Status & Actions

+ <%!-- Internal Notes Section (Staff Only) --%> + <%= if @can_view_internal and @internal_notes_enabled do %> +
+
+
+ + + +

+ Internal Notes ({length(@internal_notes)}) +

+ Staff Only +
- <%!-- Current Status --%> -
- Current Status -
- <%= case @ticket.status do %> - <% "open" -> %> - Open - <% "in_progress" -> %> - In Progress - <% "resolved" -> %> - Resolved - <% "closed" -> %> - Closed - <% end %> + <%!-- Internal Notes List --%> +
+ <%= if Enum.empty?(@internal_notes) do %> +
+ No internal notes yet. +
+ <% else %> + <%= for note <- @internal_notes do %> +
+
+
+ <.user_avatar user={note.user} size="sm" /> +
+ {note.user.email} + + {Calendar.strftime(note.inserted_at, "%Y-%m-%d %H:%M")} + +
+
+ +
+
{note.content}
+
+ <% end %> + <% end %> +
+ + <%!-- Add Internal Note Form --%> +
+
+ + +
+ +
+
+ <% end %> +
- <%!-- Status Actions --%> -
- <%= if @ticket.status == "open" do %> - - - <% end %> - - <%= if @ticket.status == "in_progress" do %> - - - <% end %> + <%!-- Sidebar --%> +
+ <%!-- Status & Actions Card --%> +
+
+

Status & Actions

- <%= if @ticket.status == "resolved" do %> - - - <% end %> + <%!-- Current Status --%> +
+ Current Status +
+ <%= case @ticket.status do %> + <% "open" -> %> + Open + <% "in_progress" -> %> + In Progress + <% "resolved" -> %> + Resolved + <% "closed" -> %> + Closed + <% end %> +
+
- <%= if @ticket.status == "closed" do %> - - <% end %> -
-
-
+ <%!-- Status Actions --%> +
+ <%= if @ticket.status == "open" do %> + + + <% end %> - <%!-- Details Card --%> -
-
-

Details

+ <%= if @ticket.status == "in_progress" do %> + + + <% end %> - <%!-- Customer --%> -
- Customer -
- <%= if @ticket.user do %> - <.user_avatar user={@ticket.user} size="xs" /> - {@ticket.user.email} - <% else %> - Unknown + <%= if @ticket.status == "resolved" do %> + + <% end %> -
-
- <%!-- Assigned To --%> -
- Assigned To -
- <%= if @ticket.assigned_to do %> - {@ticket.assigned_to.email} - <% else %> -
- Unassigned - -
+ <%= if @ticket.status == "closed" do %> + <% end %>
+
- <%!-- Comments Count --%> -
- Comments -
{@ticket.comment_count}
-
+ <%!-- Details Card --%> +
+
+

Details

- <%!-- Timestamps --%> - <%= if @ticket.resolved_at do %> + <%!-- Customer --%>
- Resolved At -
- {Calendar.strftime(@ticket.resolved_at, "%Y-%m-%d %H:%M")} + Customer +
+ <%= if @ticket.user do %> + <.user_avatar user={@ticket.user} size="xs" /> + {@ticket.user.email} + <% else %> + Unknown + <% end %>
- <% end %> - <%= if @ticket.closed_at do %> + <%!-- Assigned To --%>
- Closed At -
- {Calendar.strftime(@ticket.closed_at, "%Y-%m-%d %H:%M")} + Assigned To +
+ <%= if @ticket.assigned_to do %> + {@ticket.assigned_to.email} + <% else %> +
+ Unassigned + +
+ <% end %>
- <% end %> + + <%!-- Comments Count --%> +
+ Comments +
{@ticket.comment_count}
+
+ + <%!-- Timestamps --%> + <%= if @ticket.resolved_at do %> +
+ Resolved At +
+ {Calendar.strftime(@ticket.resolved_at, "%Y-%m-%d %H:%M")} +
+
+ <% end %> + + <%= if @ticket.closed_at do %> +
+ Closed At +
+ {Calendar.strftime(@ticket.closed_at, "%Y-%m-%d %H:%M")} +
+
+ <% end %> +
-
- <%!-- Status History Card --%> -
-
-

Status History

+ <%!-- Status History Card --%> +
+
+

Status History

-
- <%= for entry <- @status_history do %> -
-
-
+
+ <%= for entry <- @status_history do %> +
+
- <%= if entry.from_status do %> - {entry.from_status} → +
+ <%= if entry.from_status do %> + {entry.from_status} → + <% end %> + {entry.to_status} +
+
+ by {(entry.changed_by && entry.changed_by.email) || "System"} +
+ {Calendar.strftime(entry.inserted_at, "%Y-%m-%d %H:%M")} +
+ <%= if entry.reason do %> +
"{entry.reason}"
<% end %> - {entry.to_status} -
-
- by {(entry.changed_by && entry.changed_by.email) || "System"} -
- {Calendar.strftime(entry.inserted_at, "%Y-%m-%d %H:%M")}
- <%= if entry.reason do %> -
"{entry.reason}"
- <% end %>
-
- <% end %> + <% end %> +
-
- <%!-- Media Selector Modal --%> - <%= if @attachments_enabled do %> - <.live_component - module={PhoenixKitWeb.Live.Components.MediaSelectorModal} - id="ticket-media-selector" - show={@show_media_selector} - mode={:multiple} - selected_uuids={Enum.map(@attachments, & &1.file_uuid)} - phoenix_kit_current_user={@current_user} - /> - <% end %> -
+ <%!-- Media Selector Modal --%> + <%= if @attachments_enabled do %> + <.live_component + module={PhoenixKitWeb.Live.Components.MediaSelectorModal} + id="ticket-media-selector" + show={@show_media_selector} + mode={:multiple} + selected_uuids={Enum.map(@attachments, & &1.file_uuid)} + phoenix_kit_current_user={@current_user} + /> + <% end %> +
+ diff --git a/lib/modules/customer_service/web/edit.html.heex b/lib/modules/customer_service/web/edit.html.heex index 31ff9b66b..0b6df4e26 100644 --- a/lib/modules/customer_service/web/edit.html.heex +++ b/lib/modules/customer_service/web/edit.html.heex @@ -1,194 +1,202 @@ -
- <.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets")} /> + +
+ <.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets")} /> -
-
-

- {if @action == :new, do: "New Ticket", else: "Edit Ticket"} -

+
+
+

+ {if @action == :new, do: "New Ticket", else: "Edit Ticket"} +

- <.form for={@form} phx-change="validate" phx-submit="save" class="space-y-6"> - <%!-- Customer (for new tickets) --%> - <%= if @action == :new do %> -
- - - -
- <% end %> - - <%!-- Title --%> -
- - - <%= if @form[:title].errors != [] do %> - - <% end %> -
- - <%!-- Description --%> -
- - - <%= if @form[:description].errors != [] do %> - + <.form for={@form} phx-change="validate" phx-submit="save" class="space-y-6"> + <%!-- Customer (for new tickets) --%> + <%= if @action == :new do %> +
+ + + +
<% end %> -
- <%!-- Assignment (for edit) --%> - <%= if @action == :edit do %> + <%!-- Title --%>
- + + <%= if @form[:title].errors != [] do %> + + <% end %>
- <%!-- Status (for edit) --%> + <%!-- Description --%>
- + + <%= if @form[:description].errors != [] do %> + + <% end %>
- <% end %> - <%!-- Attachments (for new tickets) --%> - <%= if @action == :new and @attachments_enabled do %> -
- + <%!-- Assignment (for edit) --%> + <%= if @action == :edit do %> +
+ + +
+ + <%!-- Status (for edit) --%> +
+ + +
+ <% end %> - <%= if Enum.any?(@pending_files) do %> -
- <%= for file <- @pending_files do %> -
- <%= if file.file_type == "image" do %> - {file.original_file_name} - <% else %> -
- <.icon name="hero-document" class="w-6 h-6 text-base-content/50" /> + <%!-- Attachments (for new tickets) --%> + <%= if @action == :new and @attachments_enabled do %> +
+ + + <%= if Enum.any?(@pending_files) do %> +
+ <%= for file <- @pending_files do %> +
+ <%= if file.file_type == "image" do %> + {file.original_file_name} + <% else %> +
+ <.icon name="hero-document" class="w-6 h-6 text-base-content/50" /> +
+ <% end %> +
+
{file.original_file_name}
- <% end %> -
-
{file.original_file_name}
+
- -
- <% end %> -
- <% end %> + <% end %> +
+ <% end %> - +
+ <% end %> + + <%!-- Actions --%> +
+ <.link + navigate={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets")} + class="btn btn-ghost" > - <.icon name="hero-paper-clip" class="w-4 h-4" /> - {if Enum.any?(@pending_files), do: "Add More Files", else: "Attach Files"} + Cancel + +
- <% end %> - - <%!-- Actions --%> -
- <.link - navigate={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets")} - class="btn btn-ghost" - > - Cancel - - -
- + +
-
- <%!-- Media Selector Modal (for new tickets) --%> - <%= if @action == :new and @attachments_enabled do %> - <.live_component - module={PhoenixKitWeb.Live.Components.MediaSelectorModal} - id="new-ticket-media-selector" - show={@show_media_selector} - mode={:multiple} - selected_uuids={@pending_file_uuids} - phoenix_kit_current_user={@current_user} - /> - <% end %> -
+ <%!-- Media Selector Modal (for new tickets) --%> + <%= if @action == :new and @attachments_enabled do %> + <.live_component + module={PhoenixKitWeb.Live.Components.MediaSelectorModal} + id="new-ticket-media-selector" + show={@show_media_selector} + mode={:multiple} + selected_uuids={@pending_file_uuids} + phoenix_kit_current_user={@current_user} + /> + <% end %> +
+ diff --git a/lib/modules/customer_service/web/list.html.heex b/lib/modules/customer_service/web/list.html.heex index 05fffefaf..55d0f75cb 100644 --- a/lib/modules/customer_service/web/list.html.heex +++ b/lib/modules/customer_service/web/list.html.heex @@ -1,223 +1,310 @@ -
- <.admin_page_header - back={PhoenixKit.Utils.Routes.path("/admin")} - title="Support Tickets" - subtitle="Manage customer support requests" - > - <:actions> - <.link - navigate={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets/new")} - class="btn btn-primary" - > - <.icon name="hero-plus" class="h-5 w-5" /> New Ticket - - - - - <%!-- Stats Cards --%> -
- +
+ <.admin_page_header + back={PhoenixKit.Utils.Routes.path("/admin")} + title="Support Tickets" + subtitle="Manage customer support requests" > - <:icon> - <.icon name="hero-list-bullet" class="w-5 h-5" /> - - + <:actions> + <.link + navigate={PhoenixKit.Utils.Routes.path("/admin/customer-service/tickets/new")} + class="btn btn-primary" + > + <.icon name="hero-plus" class="h-5 w-5" /> New Ticket + + + - - <:icon> - <.icon name="hero-inbox" class="w-5 h-5" /> - - + <%!-- Stats Cards --%> +
+ + <:icon> + <.icon name="hero-list-bullet" class="w-5 h-5" /> + + - - <:icon> - <.icon name="hero-clock" class="w-5 h-5" /> - - + + <:icon> + <.icon name="hero-inbox" class="w-5 h-5" /> + + - - <:icon> - <.icon name="hero-check-circle" class="w-5 h-5" /> - - + + <:icon> + <.icon name="hero-clock" class="w-5 h-5" /> + + - - <:icon> - <.icon name="hero-archive-box" class="w-5 h-5" /> - - -
+ + <:icon> + <.icon name="hero-check-circle" class="w-5 h-5" /> + + - <%!-- Filters --%> -
-
-
- -
-
- -
-
- -
- -
-
+ + <:icon> + <.icon name="hero-archive-box" class="w-5 h-5" /> + + +
- <%!-- Loading --%> - <%= if @loading do %> -
- + <%!-- Filters --%> +
+
+
+ +
+
+ +
+
+ +
+ +
- <% else %> - <%!-- Empty State --%> - <%= if Enum.empty?(@tickets) do %> -
- <.icon name="hero-ticket" class="h-16 w-16 mx-auto text-base-content/30 mb-4" /> -

No tickets found

-

- <%= if @status_filter || @search_query do %> - Try adjusting your filters or search query. - <% else %> - Create your first ticket to get started. - <% end %> -

+ + <%!-- Loading --%> + <%= if @loading do %> +
+
<% else %> - <%!-- Desktop Table --%> -