Skip to content

Commit 77b39b8

Browse files
potts99potts99
committed
ticket ui improvements
1 parent d075240 commit 77b39b8

File tree

1 file changed

+34
-48
lines changed

1 file changed

+34
-48
lines changed

‎apps/client/pages/ticket/[id].tsx‎

Lines changed: 34 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1+
//@ts-nocheck
12
import { Listbox, Switch, Transition } from "@headlessui/react";
23
import {
34
CheckCircleIcon,
45
CheckIcon,
56
ChevronUpDownIcon,
6-
LockClosedIcon,
7-
LockOpenIcon,
87
} from "@heroicons/react/20/solid";
98
import { Link, RichTextEditor } from "@mantine/tiptap";
109
import Highlight from "@tiptap/extension-highlight";
@@ -310,16 +309,15 @@ export default function Ticket() {
310309
{status === "error" && (
311310
<div className="min-h-screen flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
312311
<h2 className="text-2xl font-bold"> Error fetching data ... </h2>
313-
{/* <img src={server} className="h-96 w-96" alt="error" /> */}
314312
</div>
315313
)}
316314

317315
{status === "success" && (
318316
<main className="flex-1 min-h-[90vh] py-8">
319-
<div className="mx-auto max-w-6xl w-full px-4 sm:px-6 lg:px-8 flex flex-col xl:flex-row justify-center">
317+
<div className="mx-auto max-w-7xl w-full px-4 flex flex-col xl:flex-row justify-center">
320318
<div className="xl:border-r xl:border-gray-200 xl:pr-8 xl:w-2/3">
321319
<div className="">
322-
<div className="md:flex md:items-center md:justify-between md:space-x-4 xl:border-b xl:pb-6">
320+
<div className="md:flex md:justify-between md:space-x-4 xl:border-b xl:pb-4">
323321
<div className="w-4/5">
324322
{edit ? (
325323
<div className="">
@@ -341,41 +339,17 @@ export default function Ticket() {
341339
<div className="mt-2 text-xs flex flex-row items-center space-x-1 text-gray-500 dark:text-white">
342340
{!data.ticket.isComplete ? (
343341
<div className="flex items-center space-x-2">
344-
<LockOpenIcon
345-
className="h-3 w-3 text-green-500"
346-
aria-hidden="true"
347-
/>
348-
<span className="text-xs font-medium text-green-700 dark:text-white">
342+
<span className="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">
349343
{t("open_issue")}
350344
</span>
351345
</div>
352346
) : (
353347
<div className="flex items-center space-x-2">
354-
<LockClosedIcon
355-
className="h-4 w-4 text-red-500"
356-
aria-hidden="true"
357-
/>
358-
<span className="text-xs font-medium text-red-700 dark:text-white">
348+
<span className="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
359349
{t("closed_issue")}
360350
</span>
361351
</div>
362352
)}
363-
<span className="font-medium text-xs text-gray-900 dark:text-white">
364-
{data.ticket.email}
365-
</span>
366-
<span className="text-xs text-gray-900 dark:text-whit">
367-
via
368-
</span>
369-
<span className="font-medium text-xs text-gray-900 dark:text-white">
370-
{data.ticket.fromImap === true
371-
? " Email - "
372-
: " Agent - "}
373-
</span>
374-
375-
<span className="text-xs font-medium text-gray-900 dark:text-white">
376-
{t("created_at")}{" "}
377-
{moment(data.ticket.createdAt).format("DD/MM/YYYY")}
378-
</span>
379353
</div>
380354
</div>
381355
<div className="mt-4 flex space-x-3 md:mt-0">
@@ -407,7 +381,7 @@ export default function Ticket() {
407381
) : (
408382
<Button
409383
variant="outline"
410-
className="hover:cursor-pointer"
384+
className="hover:cursor-pointer align-top"
411385
onClick={() => update()}
412386
>
413387
Save
@@ -503,8 +477,25 @@ export default function Ticket() {
503477
</div>
504478
</aside>
505479
<div className="py-3 xl:pb-0 xl:pt-2">
506-
<span className="text-sm font-bold">{t("description")}</span>
507-
<div className="prose max-w-none">
480+
<div className="flex flex-row items-center text-sm space-x-1">
481+
{data.ticket.fromImap ? (
482+
<>
483+
<span className="font-bold">{data.ticket.email}</span>
484+
<span>created via email at </span>
485+
<span className="font-bold">
486+
{moment(data.ticket.createdAt).format("DD/MM/YYYY")}
487+
</span>
488+
</>
489+
) : (
490+
<>
491+
<span>Created by at </span>
492+
<span className="">
493+
{moment(data.ticket.createdAt).format("DD/MM/YYYY")}
494+
</span>
495+
</>
496+
)}
497+
</div>
498+
<div className="prose max-w-none mt-2">
508499
{edit && !data.ticket.fromImap ? (
509500
<RichTextEditor
510501
editor={IssueEditor}
@@ -555,14 +546,11 @@ export default function Ticket() {
555546
) : (
556547
<div className="">
557548
{data.ticket.fromImap ? (
558-
<div className="break-words bg-white rounded-md p-4 text-black">
559-
{/* {renderHTML(data.ticket.detail)} */}
549+
<div className="break-words bg-white rounded-md text-black">
560550
<Frame
561551
className="min-h-[60vh] h-full w-full"
562552
initialContent={data.ticket.detail}
563-
>
564-
{" "}
565-
</Frame>
553+
/>
566554
</div>
567555
) : (
568556
<div className="">
@@ -756,28 +744,26 @@ export default function Ticket() {
756744
</button>
757745
) : (
758746
<button
759-
onClick={() => {
760-
transferTicket();
761-
}}
762-
className="text-sm font-medium text-gray-500 hover:underline dark:text-white"
747+
onClick={() => setAssignedEdit(false)}
748+
className="text-sm align-top font-medium text-gray-500 hover:underline dark:text-white"
763749
>
764-
{t("save")}
750+
cancel
765751
</button>
766752
)}
767753
</div>
768754
{!assignedEdit ? (
769-
<ul role="list" className="mt-3 space-y-3">
770-
<li className="flex justify-star items-center space-x-2">
755+
<ul role="list" className="mt-1 space-y-3">
756+
<li className="flex justify-start items-center space-x-2">
771757
<div className="flex-shrink-0">
772-
<span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500">
758+
<span className="inline-flex h-5 w-5 items-center justify-center rounded-full bg-gray-500">
773759
<span className="text-xs font-medium leading-none text-white uppercase ">
774760
{data.ticket.assignedTo
775761
? data.ticket.assignedTo.name[0]
776762
: "-"}
777763
</span>
778764
</span>
779765
</div>
780-
<div className="text-sm font-medium text-gray-900 dark:text-white">
766+
<div className="text-sm font-medium mt-[4px] text-gray-900 dark:text-white">
781767
{data.ticket.assignedTo
782768
? data.ticket.assignedTo.name
783769
: ""}

0 commit comments

Comments
 (0)