This commit is contained in:
Sabda Yagra 2025-09-10 11:53:27 +07:00
parent 3d4860c7a5
commit 92f8a4b030
3 changed files with 122 additions and 71 deletions

View File

@ -169,7 +169,6 @@ export default function FormConvertSPIT() {
const t = useTranslations("Form");
const { id } = useParams() as { id: string };
const [isAlreadySaved, setIsAlreadySaved] = useState(false);
const {
control,
handleSubmit,

View File

@ -709,9 +709,9 @@ export default function FormDetailTicketing({ id }: Props) {
};
return (
<section className="flex-1 flex flex-col bg-white">
{/* Header */}
<div className="border-b px-4 py-3">
<section className="flex flex-col h-full bg-white">
{/* Header - tetap di atas */}
<div className="border-b px-4 py-3 shrink-0 bg-white sticky top-0 z-10">
<div className="flex items-center gap-3">
<div className="text-sm font-medium">
{(detail?.title ?? "").split(" ").slice(0, 25).join(" ") +
@ -723,10 +723,29 @@ export default function FormDetailTicketing({ id }: Props) {
</div>
</div>
{/* Chat Messages */}
<div className="flex-1 overflow-auto p-4 bg-gray-50 flex flex-col-reverse">
<div className="flex flex-col gap-3">
{ticketReply.map((m) => {
{/* Chat Messages - scrollable */}
<div className="flex-1 overflow-y-auto p-4 space-y-3 bg-gray-50">
{!detail ? (
<div className="h-full flex items-center justify-center text-muted-foreground">
<div className="text-center">
<div className="mb-4">
<svg
width="72"
height="72"
viewBox="0 0 24 24"
className="mx-auto opacity-60"
>
<path
fill="currentColor"
d="M12 3C7 3 3 6.6 3 11c0 1.9.8 3.6 2.2 5v3.1L8 17.9c1 .3 2 .5 4 .5 5 0 9-3.6 9-8.1S17 3 12 3z"
/>
</svg>
</div>
<div className="text-sm">Pilih issue untuk melihat detail</div>
</div>
</div>
) : (
ticketReply.map((m) => {
const isUser = m.user.fullname !== "Agent";
return (
<div
@ -758,31 +777,55 @@ export default function FormDetailTicketing({ id }: Props) {
</div>
</div>
);
})}
</div>
})
)}
<div ref={chatEndRef} />
</div>
{/* Input Box */}
<div className="border-t px-4 py-3 bg-white">
<div className="flex flex-col gap-2 max-w-full mx-auto">
<textarea
placeholder='Enter your reply or type "/" to insert a quick reply'
value={replyText}
onChange={(e) => setReplyText(e.target.value)}
className="w-full border rounded-xl p-3 min-h-[64px] resize-none focus:outline-none focus:ring"
/>
<div className="flex items-center justify-between gap-3">
<Button variant="outline" size="sm" onClick={handleTranslate}>
{/* Input Box - tetap di bawah */}
<div className="border-t px-4 py-3 bg-white shrink-0 sticky bottom-0 z-10">
<div className="flex items-end gap-2">
{/* Translate button */}
<Button
variant="outline"
size="icon"
className="shrink-0"
onClick={handleTranslate}
>
<span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
>
<g fill="currentColor">
<path d="M4.545 6.714L4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286zm1.634-.736L5.5 3.956h-.049l-.679 2.022z" />
<path d="M0 2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v3h3a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zm7.138 9.995q.289.451.63.846c-.748.575-1.673 1.001-2.768 1.292c.178.217.451.635.555.867c1.125-.359 2.08-.844 2.886-1.494c.777.665 1.739 1.165 2.93 1.472c.133-.254.414-.673.629-.89c-1.125-.253-2.057-.694-2.82-1.284c.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6 6 0 0 1-.415-.492a2 2 0 0 1-.94.31" />
</g>
</svg>
</span>
Translate
</Button>
<div className="flex items-center gap-2">
{/* Textarea */}
<textarea
placeholder="Tulis balasan..."
value={replyText}
onChange={(e) => setReplyText(e.target.value)}
className="flex-1 border rounded-xl p-3 resize-none min-h-[44px] max-h-[120px] focus:outline-none focus:ring"
rows={1}
/>
{/* Action buttons */}
<div className="flex items-center gap-2 shrink-0">
<Button
variant="outline"
size="sm"
onClick={() => sendReply(true)}
disabled={!replyText.trim()}
>
Kirim & Resolve
Resolve
</Button>
<Button
size="sm"
@ -794,7 +837,6 @@ export default function FormDetailTicketing({ id }: Props) {
</div>
</div>
</div>
</div>
</section>
);
}

View File

@ -2642,6 +2642,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
(Number(roleId) == 3 || Number(roleId) == 14 || Number(roleId) == 15) &&
Number(levelNumber) == 3
) {
const hideForRole3 = Number(roleId) === 3;
if (Number(userParentLevelId) != 761) {
menusSelected = [
{
@ -2697,6 +2699,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "heroicons:share",
children: [],
},
...(!hideForRole3
? [
{
href: "/contributor/content/spit",
label: "spit",
@ -2704,6 +2708,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
icon: "heroicons:credit-card",
children: [],
},
]
: []),
// {
// href: "/contributor/content/nulis-ai",
// label: "nulis ai",
@ -2729,6 +2735,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
...(!hideForRole3
? [
{
groupLabel: "",
id: "planning",
@ -2758,6 +2766,8 @@ export function getMenuList(pathname: string, t: any): Group[] {
},
],
},
]
: []),
{
groupLabel: "",
id: "task",