mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixing

This commit is contained in:
Sabda Yagra 2025-09-04 00:05:14 +07:00
parent a11257ef4e
commit affe1bce94
7 changed files with 392 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
components/form/communication/collaboration-form.tsx
View File

@ -255,6 +255,78 @@ export default function FormCollaboration() {
Priority<span className="text-red-500">*</span>
</Label>
<Select
id="target-select"
options={ticketPriority}
onChange={(selectedOption) =>
setSelectedTarget(Number(selectedOption?.value))
}
placeholder="Pilih"
styles={{
control: (base, state) => ({
...base,
minHeight: "40px",
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937" // gray-800
: "#ffffff",
color: document.documentElement.classList.contains("dark")
? "#f9fafb" // gray-100
: "#111827", // gray-900
borderColor: state.isFocused
? "#2563eb"
: base.borderColor, // biru-600
boxShadow: state.isFocused
? "0 0 0 1px #2563eb"
: base.boxShadow,
"&:hover": {
borderColor: "#2563eb",
},
}),
menu: (base) => ({
...base,
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
}),
option: (base, state) => ({
...base,
backgroundColor: state.isSelected
? "#2563eb" // biru solid kalau dipilih
: state.isFocused
? "#2563eb33" // biru transparan kalau hover
: document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: state.isSelected
? "#ffffff"
: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
cursor: "pointer",
}),
singleValue: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
}),
placeholder: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#9ca3af"
: "#6b7280",
}),
}}
/>
</div>
{/* <div className="mt-5">
<Label>
Priority<span className="text-red-500">*</span>
</Label>
<Select
className="bg-white dark:bg-black"
id="target-select"
options={ticketPriority}
onChange={(selectedOption) =>
@ -268,7 +340,7 @@ export default function FormCollaboration() {
}),
}}
/>
</div>
</div> */}
</div>
<div className="w-full">
<div className="mt-5">
@ -283,8 +355,82 @@ export default function FormCollaboration() {
onChange={handleChange}
formatOptionLabel={formatOptionLabel}
isMulti={false}
styles={{
control: (base, state) => ({
...base,
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937" // bg-gray-800
: "#ffffff", // bg-white
color: document.documentElement.classList.contains("dark")
? "#f9fafb" // text-gray-100
: "#111827", // text-gray-900
borderColor: state.isFocused
? "#2563eb"
: base.borderColor,
boxShadow: state.isFocused
? "0 0 0 1px #2563eb"
: base.boxShadow,
"&:hover": {
borderColor: "#2563eb",
},
}),
menu: (base) => ({
...base,
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
}),
option: (base, state) => ({
...base,
backgroundColor: state.isSelected
? "#2563eb"
: state.isFocused
? "#2563eb33"
: document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: state.isSelected
? "#ffffff"
: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
cursor: "pointer",
}),
singleValue: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
}),
placeholder: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#9ca3af"
: "#6b7280",
}),
}}
/>
</div>
{/* <div className="mt-5">
<Label>
Eskalasi Untuk <span className="text-red-500">*</span>
</Label>
<Select
options={options}
className="w-100"
closeMenuOnSelect={false}
components={animatedComponent}
onChange={handleChange}
formatOptionLabel={formatOptionLabel}
isMulti={false}
/>
</div> */}
</div>
<div className="mt-5">
<Label>Narasi Penugasan</Label>

27
components/form/communication/escalation-detail-form.tsx
View File

@ -61,7 +61,6 @@ export type replyDetail = {
export default function FormDetailEscalation() {
const MySwal = withReactContent(Swal);
const { id } = useParams() as { id: string };
const [detail, setDetail] = useState<any>();
const [ticketReply, setTicketReply] = useState<replyDetail[]>([]);
const [replyVisible, setReplyVisible] = useState(false);
@ -173,11 +172,11 @@ export default function FormDetailEscalation() {
<div className="flex">
<div className="flex flex-col mt-6 w-full mb-3">
{detail !== undefined && (
<div key={detail?.id} className="bg-slate-300 rounded-md">
<p className="p-5 bg-slate-300 rounded-md text-lg font-semibold">
<div key={detail?.id} className="bg-slate-300 dark:bg-black rounded-md">
<p className="p-5 bg-slate-300 dark:bg-black rounded-md text-lg font-semibold">
Ticket #{detail.id}
</p>
<div className="flex flex-row gap-3 bg-sky-100 p-5 items-center">
<div className="flex flex-row gap-3 bg-sky-100 dark:bg-sky-900 p-5 items-center">
<Icon icon="qlementine-icons:user-16" width={36} />
<div>
@ -210,8 +209,8 @@ export default function FormDetailEscalation() {
</p>
</div>
</div>
<p className="p-5 bg-white">{detail.message}</p>
<div className="px-4 py-1 bg-white text-sm">
<p className="p-5 bg-white dark:bg-black">{detail.message}</p>
<div className="px-4 py-1 bg-white dark:bg-black text-sm">
{detail?.typeId === 6 && detail?.emergencyIssue ? (
<div className="row mx-0 mb-3 emergency-attachments">
<div className=" mr-4">
@ -239,7 +238,7 @@ export default function FormDetailEscalation() {
</div>
</div>
{detail !== undefined && (
<div className="gap-5 mb-5 w-full border mt-3 rounded-md bg-white">
<div className="gap-5 mb-5 w-full border mt-3 rounded-md bg-white dark:bg-black">
<div className="space-y-2 px-3 mt-3">
<Label>Judul</Label>
<Controller
@ -297,16 +296,16 @@ export default function FormDetailEscalation() {
)} */}
</div>
<div className="mx-3 my-3">
<h3 className="text-gray-700 font-medium">Tanggapan</h3>
<h3 className="text-gray-700 dark:text-white font-medium">Tanggapan</h3>
<div className="space-y-4 ml-5 mt-5">
{listDiscussion.map((parent: any) => (
<div key={parent.id} className="border-b pb-4">
<div className="flex justify-between items-start">
<div>
<p className="font-semibold text-gray-800">
<p className="font-semibold text-gray-800 dark:text-white">
{parent.messageFrom?.fullname}
</p>
<p className="text-gray-600">{parent.message}</p>
<p className="text-gray-600 dark:text-white">{parent.message}</p>
<p className="text-sm text-gray-400">
{parent.createdAt}
</p>
@ -338,7 +337,7 @@ export default function FormDetailEscalation() {
<div className="flex justify-end gap-2 mt-2">
<button
onClick={() => setActiveReplyId(null)}
className="px-4 py-1 text-sm bg-gray-200 text-gray-800 rounded-md"
className="px-4 py-1 text-sm bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white rounded-md"
>
Batal
</button>
@ -363,10 +362,10 @@ export default function FormDetailEscalation() {
className="flex justify-between items-start"
>
<div>
<p className="font-semibold text-gray-800">
<p className="font-semibold text-gray-800 dark:text-white">
{child.messageFrom?.fullname}
</p>
<p className="text-gray-600">{child.message}</p>
<p className="text-gray-600 dark:text-white">{child.message}</p>
<p className="text-sm text-gray-400">
{child.createdAt}
</p>
@ -386,7 +385,7 @@ export default function FormDetailEscalation() {
</div>
<div className="mt-6">
<label className="block text-gray-700 font-medium mb-2">
<label className="block text-gray-700 dark:text-white font-medium mb-2">
Tulis Tanggapan Anda
</label>
<textarea

140
components/form/communication/internal-form.tsx
View File

@ -201,10 +201,80 @@ export default function FormInternal() {
setSelectedTarget(selectedOption?.value ?? null)
}
placeholder="Pilih"
styles={{ control: (base) => ({ ...base, minHeight: "40px" }) }}
styles={{
control: (base, state) => ({
...base,
minHeight: "40px",
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937" // bg-gray-800
: "#ffffff", // bg-white
color: document.documentElement.classList.contains("dark")
? "#f9fafb" // text-gray-100
: "#111827", // text-gray-900
borderColor: state.isFocused ? "#2563eb" : base.borderColor,
boxShadow: state.isFocused
? "0 0 0 1px #2563eb"
: base.boxShadow,
"&:hover": { borderColor: "#2563eb" },
}),
menu: (base) => ({
...base,
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
}),
option: (base, state) => ({
...base,
backgroundColor: state.isSelected
? "#2563eb"
: state.isFocused
? "#2563eb33"
: document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: state.isSelected
? "#ffffff"
: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
cursor: "pointer",
}),
singleValue: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
}),
placeholder: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#9ca3af"
: "#6b7280",
}),
}}
/>
</div>
{/* <div className="w-6/12">
<Label>
Priority <span className="text-red-500">*</span>
</Label>
<Select
id="target-select"
options={priority}
onChange={(selectedOption) =>
setSelectedTarget(selectedOption?.value ?? null)
}
placeholder="Pilih"
styles={{ control: (base) => ({ ...base, minHeight: "40px" }) }}
/>
</div> */}
<div className="w-6/12">
<Label>Ditunjukan Untuk</Label>
<Select
@ -214,9 +284,77 @@ export default function FormInternal() {
components={animatedComponent}
onChange={handleChange}
isMulti={false}
styles={{
control: (base, state) => ({
...base,
minHeight: "40px",
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
borderColor: state.isFocused ? "#2563eb" : base.borderColor,
boxShadow: state.isFocused
? "0 0 0 1px #2563eb"
: base.boxShadow,
"&:hover": { borderColor: "#2563eb" },
}),
menu: (base) => ({
...base,
backgroundColor:
document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
}),
option: (base, state) => ({
...base,
backgroundColor: state.isSelected
? "#2563eb"
: state.isFocused
? "#2563eb33"
: document.documentElement.classList.contains("dark")
? "#1f2937"
: "#ffffff",
color: state.isSelected
? "#ffffff"
: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
cursor: "pointer",
}),
singleValue: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#f9fafb"
: "#111827",
}),
placeholder: (base) => ({
...base,
color: document.documentElement.classList.contains("dark")
? "#9ca3af"
: "#6b7280",
}),
}}
/>
</div>
{/* <div className="w-6/12">
<Label>Ditunjukan Untuk</Label>
<Select
options={options}
className="w-100"
closeMenuOnSelect={false}
components={animatedComponent}
onChange={handleChange}
isMulti={false}
/>
</div> */}
<div className="w-6/12 mt-5">
<Label>Narasi Penugasan</Label>
<Controller

19
components/form/content/audio-detail-form.tsx
View File

@ -227,7 +227,9 @@ export default function FormAudioDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set()
);
if (value) {
// Checklist semua item di modal
@ -716,7 +718,9 @@ export default function FormAudioDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Checklist semua item di modal
listDest.forEach((item: any) => {
@ -779,7 +783,9 @@ export default function FormAudioDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Unchecklist semua item di modal
currentFileLevels.clear();
@ -863,8 +869,6 @@ export default function FormAudioDetail() {
});
};
const updateModalChecklistLevels = (
fileIndex: number,
placement: string,
@ -1188,7 +1192,10 @@ export default function FormAudioDetail() {
// setSelectedTarget(id);
// }}
>
<SelectTrigger size="md">
<SelectTrigger
size="md"
className="border border-gray-300 dark:border-gray-600"
>
<SelectValue placeholder="Pilih" />
</SelectTrigger>
<SelectContent>

33
components/form/content/image-detail-form.tsx
View File

@ -136,10 +136,8 @@ export default function FormImageDetail() {
const userLevelName = Cookies.get("state");
const roleId = getCookiesDecrypt("urie");
const [listDest, setListDest] = useState<Destination[]>([]);
console.log("LALALALA", userLevelName);
const [modalOpen, setModalOpen] = useState(false);
const { id } = useParams() as { id: string };
console.log(id);
const editor = useRef(null);
type ImageSchema = z.infer<typeof imageSchema>;
const t = useTranslations("Form");
@ -486,7 +484,9 @@ export default function FormImageDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set()
);
if (value) {
// Checklist semua item di modal
@ -1014,18 +1014,20 @@ export default function FormImageDetail() {
const temp = [];
for (let i = 0; i < filePlacements?.length; i++) {
if (filePlacements[i]?.length !== 0) {
const now = filePlacements[i]
const now = filePlacements[i];
let nowArr = now?.join(",")?.replaceAll("wilayah", "polda");
nowArr = nowArr?.replaceAll("nasional", "mabes");
nowArr = nowArr?.replaceAll("semua", "all");
// Dapatkan checked levels untuk file ini
const currentFileCheckedLevels = fileCheckedLevels[i] ? Array.from(fileCheckedLevels[i]) : [];
const currentFileCheckedLevels = fileCheckedLevels[i]
? Array.from(fileCheckedLevels[i])
: [];
const data = {
mediaFileId: files[i]?.id,
placements: nowArr,
customLocationPlacements: currentFileCheckedLevels.join(",")
customLocationPlacements: currentFileCheckedLevels.join(","),
};
temp.push(data);
}
@ -1088,7 +1090,9 @@ export default function FormImageDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Checklist semua item di modal
listDest.forEach((item: any) => {
@ -1151,7 +1155,9 @@ export default function FormImageDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Unchecklist semua item di modal
currentFileLevels.clear();
@ -1384,7 +1390,6 @@ export default function FormImageDetail() {
<div className="flex items-center">
<div className="py-3 w-full space-y-2">
<Label>{t("category", { defaultValue: "Category" })}</Label>
<Select
disabled
value={String(detail?.category?.id)}
@ -1393,11 +1398,13 @@ export default function FormImageDetail() {
// setSelectedTarget(id);
// }}
>
<SelectTrigger size="md">
<SelectTrigger
size="md"
className="border border-gray-300 dark:border-gray-600"
>
<SelectValue placeholder="Pilih" />
</SelectTrigger>
<SelectContent>
{/* Show the category from details if it doesn't exist in categories list */}
{detail &&
!categories.find(
(cat) =>
@ -1998,9 +2005,7 @@ export default function FormImageDetail() {
</Button>
</DialogClose>
<DialogClose asChild>
<Button>
Simpan
</Button>
<Button>Simpan</Button>
</DialogClose>
</div>
</DialogContent>

17
components/form/content/teks-detail-form.tsx
View File

@ -220,7 +220,9 @@ export default function FormTeksDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set()
);
if (value) {
// Checklist semua item di modal
@ -730,7 +732,9 @@ export default function FormTeksDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Checklist semua item di modal
listDest.forEach((item: any) => {
@ -793,7 +797,9 @@ export default function FormTeksDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Unchecklist semua item di modal
currentFileLevels.clear();
@ -1164,7 +1170,10 @@ export default function FormTeksDetail() {
// setSelectedTarget(id);
// }}
>
<SelectTrigger size="md">
<SelectTrigger
size="md"
className="border border-gray-300 dark:border-gray-600"
>
<SelectValue placeholder="Pilih" />
</SelectTrigger>
<SelectContent>

17
components/form/content/video-detail-form.tsx
View File

@ -219,7 +219,9 @@ export default function FormVideoDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[fileIndex] || new Set());
const currentFileLevels = new Set<number>(
newArray[fileIndex] || new Set()
);
if (value) {
// Checklist semua item di modal
@ -691,7 +693,9 @@ export default function FormVideoDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" diklik
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Checklist semua item di modal
listDest.forEach((item: any) => {
@ -754,7 +758,9 @@ export default function FormVideoDetail() {
// Update fileCheckedLevels untuk sinkronisasi dengan modal ketika "all" di-unchecklist
setFileCheckedLevels((prevLevels) => {
const newArray = [...prevLevels];
const currentFileLevels = new Set<number>(newArray[index] || new Set());
const currentFileLevels = new Set<number>(
newArray[index] || new Set()
);
// Unchecklist semua item di modal
currentFileLevels.clear();
@ -1162,7 +1168,10 @@ export default function FormVideoDetail() {
// setSelectedTarget(id);
// }}
>
<SelectTrigger size="md">
<SelectTrigger
size="md"
className="border border-gray-300 dark:border-gray-600"
>
<SelectValue placeholder="Pilih" />
</SelectTrigger>
<SelectContent>