jaecoo
/
jaecoo-kelapagading
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: table agent,promo, form CRUD agent,

This commit is contained in:
Anang Yusman 2026-01-22 14:30:17 +08:00
parent a5360837c7
commit 9abbf06fc9
12 changed files with 142 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/dialog/galery-detail-dialog.tsx
View File

@ -127,15 +127,44 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
return ( return (
<> <>
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={onClose}>
<DialogContent className="max-w-3xl rounded-2xl p-0 overflow-hidden"> <DialogContent className=" rounded-2xl p-0 overflow-hidden">
{/* Header */} {/* Header */}
<div className="bg-[#1F6779] text-white px-6 py-4"> <div className="bg-[#1F6779] text-white px-6 py-4">
<DialogTitle className="text-white">Detail Galeri</DialogTitle> <DialogTitle className="text-white">Detail Galeri</DialogTitle>
<div className="flex items-center gap-2 mt-3">
<span
className={`text-xs font-medium px-3 py-1 rounded-full ${
data?.status_id === 1
? "bg-yellow-100 text-yellow-800"
: data?.status_id === 2
? "bg-green-100 text-green-800"
: data?.status_id === 3
? "bg-red-100 text-red-800"
: "bg-gray-100 text-gray-800"
}`}
>
{data?.status_id === 1
? "Menunggu"
: data?.status_id === 2
? "Disetujui"
: data?.status_id === 3
? "Ditolak"
: "Tidak Diketahui"}
</span>
<span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
Galeri
</span>
{/* <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
{promo.position}
</span> */}
</div>
</div> </div>
<div className="px-6 py-3"> <div className=" py-3">
{/* Images List */} {/* Images List */}
<div> <div className="mx-2">
<h2 className="text-2xl font-semibold text-black"> <h2 className="text-2xl font-semibold text-black">
{data.title} {data.title}
</h2> </h2>
@ -176,7 +205,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
{/* Deskripsi */} {/* Deskripsi */}
{/* Tanggal Upload */} {/* Tanggal Upload */}
<div> <div className="mx-2">
<p className="font-medium text-sm text-gray-700"> <p className="font-medium text-sm text-gray-700">
Tanggal Upload Tanggal Upload
</p> </p>
@ -186,7 +215,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
</div> </div>
{/* Timeline */} {/* Timeline */}
<div> <div className="mx-2">
<h4 className="text-sm font-semibold text-gray-700 mb-3"> <h4 className="text-sm font-semibold text-gray-700 mb-3">
Status Timeline Status Timeline
</h4> </h4>
@ -270,7 +299,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
</Button> </Button>
<Button <Button
className=" w-[180]" className=" w-[150]"
variant="destructive" variant="destructive"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
@ -284,7 +313,7 @@ export function DialogDetailGaleri({ open, onClose, data }: any) {
<Button <Button
// variant="ghost" // variant="ghost"
size="sm" size="sm"
className="bg-green-600 hover:bg-green-700 text-white w-[180]" className="bg-green-600 hover:bg-green-700 text-white w-[150]"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
handleApproveGalery(data.id); handleApproveGalery(data.id);

39
components/dialog/promo-dialog.tsx
View File

@ -27,6 +27,7 @@ import Cookies from "js-cookie";
import { error, loading, success } from "@/config/swal"; import { error, loading, success } from "@/config/swal";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import promo from "../landing-page/promo";
type PromoDetailDialogProps = { type PromoDetailDialogProps = {
promoId: number | null; promoId: number | null;
@ -187,17 +188,39 @@ export default function PromoDetailDialog({
<div className="bg-gradient-to-r from-[#0f6c75] to-[#145f66] text-white px-6 py-5 relative"> <div className="bg-gradient-to-r from-[#0f6c75] to-[#145f66] text-white px-6 py-5 relative">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-white text-xl font-semibold"> <DialogTitle className="text-white text-xl font-semibold">
Detail Promo Detail Promoaa
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
{/* STATUS BADGE */} <div className="flex items-center gap-2 mt-3">
{promo && ( <span
<div className="mt-2 bg-white/20 text-white px-4 py-[3px] rounded-full text-xs inline-flex items-center gap-2"> className={`text-xs font-medium px-3 py-1 rounded-full ${
<span className="w-2 h-2 rounded-full bg-lime-300"></span> promo?.status_id === 1
{promo.status} ? "bg-yellow-100 text-yellow-800"
</div> : promo?.status_id === 2
)} ? "bg-green-100 text-green-800"
: promo?.status_id === 3
? "bg-red-100 text-red-800"
: "bg-gray-100 text-gray-800"
}`}
>
{promo?.status_id === 1
? "Menunggu"
: promo?.status_id === 2
? "Disetujui"
: promo?.status_id === 3
? "Ditolak"
: "Tidak Diketahui"}
</span>
<span className="bg-white text-[#0F6C75] text-xs font-medium px-3 py-1 rounded-full">
Promo
</span>
{/* <span className="bg-white/20 text-white text-xs px-2 py-[2px] rounded-full">
{promo.position}
</span> */}
</div>
</div> </div>
{/* BODY */} {/* BODY */}

18
components/form/agent/agent-form.tsx
View File

@ -22,9 +22,10 @@ import { UploadCloud } from "lucide-react";
type AgentFormValues = { type AgentFormValues = {
fullName: string; fullName: string;
job_title: string;
position: string; position: string;
phone: string; phone: string;
roles: string[]; agent_type: string[];
profileImage: File | null; profileImage: File | null;
}; };
@ -40,9 +41,10 @@ export default function AddAgentForm() {
const form = useForm<AgentFormValues>({ const form = useForm<AgentFormValues>({
defaultValues: { defaultValues: {
fullName: "", fullName: "",
job_title: "",
position: "", position: "",
phone: "", phone: "",
roles: [], agent_type: [],
profileImage: null, profileImage: null,
}, },
}); });
@ -60,13 +62,13 @@ export default function AddAgentForm() {
const onSubmit = async (data: AgentFormValues) => { const onSubmit = async (data: AgentFormValues) => {
try { try {
const formData = new FormData(); const formData = new FormData();
formData.append("name", data.fullName); formData.append("name", data.fullName);
formData.append("job_title", data.position); formData.append("job_title", data.job_title);
formData.append("phone", data.phone); formData.append("phone", data.phone);
data.roles.forEach((role) => { // ✅ FIX UTAMA
formData.append("agent_type[]", role); formData.append("agent_type", JSON.stringify(data.agent_type));
});
if (file) { if (file) {
formData.append("file", file); formData.append("file", file);
@ -122,7 +124,7 @@ export default function AddAgentForm() {
<FormField <FormField
control={form.control} control={form.control}
name="position" name="job_title"
rules={{ required: true }} rules={{ required: true }}
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
@ -169,7 +171,7 @@ export default function AddAgentForm() {
<FormField <FormField
key={role} key={role}
control={form.control} control={form.control}
name="roles" name="agent_type"
render={({ field }) => { render={({ field }) => {
const selected = field.value || []; const selected = field.value || [];
return ( return (

13
components/form/agent/detail-agent-form.tsx
View File

@ -218,7 +218,16 @@ export default function DetailAgentForm(props: { isDetail: boolean }) {
<div className="flex gap-6"> <div className="flex gap-6">
{AGENT_TYPES.map((item) => ( {AGENT_TYPES.map((item) => (
<div key={item.key} className="flex items-center gap-2"> <div key={item.key} className="flex items-center gap-2">
<Checkbox checked={data.job_title === item.key} disabled /> <Checkbox
checked={
Array.isArray(data.agent_type) &&
data.agent_type
.map((v: string) => v.toLowerCase())
.includes(item.label.toLowerCase())
}
disabled
/>
<span>{item.label}</span> <span>{item.label}</span>
</div> </div>
))} ))}
@ -230,7 +239,7 @@ export default function DetailAgentForm(props: { isDetail: boolean }) {
<Label className="mb-2 block">Foto Profile</Label> <Label className="mb-2 block">Foto Profile</Label>
<div className="w-24 h-24 rounded-lg overflow-hidden border"> <div className="w-24 h-24 rounded-lg overflow-hidden border">
<Image <Image
src={data.profile_picture_url} src={data?.profile_picture_url}
alt="Profile" alt="Profile"
width={96} width={96}
height={96} height={96}

58
components/form/agent/update-agent-form.tsx
View File

@ -20,12 +20,13 @@ import { X } from "lucide-react";
type AgentFormValues = { type AgentFormValues = {
fullName: string; fullName: string;
job_title: string;
position: string; position: string;
phone: string; phone: string;
roles: string[]; roles: string[];
}; };
const AGENT_TYPES = ["after-Sales", "sales", "spv", "branch_manager"]; const AGENT_TYPES = ["After Sales", "Sales", "Spv", "Branch Manager"];
export default function UpdateAgentForm({ id }: { id: number }) { export default function UpdateAgentForm({ id }: { id: number }) {
const router = useRouter(); const router = useRouter();
@ -57,9 +58,9 @@ export default function UpdateAgentForm({ id }: { id: number }) {
form.reset({ form.reset({
fullName: agent.name, fullName: agent.name,
position: agent.job_title, job_title: agent.job_title,
phone: agent.phone, phone: agent.phone,
roles: agent.job_title ? [agent.job_title] : [], roles: Array.isArray(agent.agent_type) ? agent.agent_type : [],
}); });
// ✅ FOTO DARI API // ✅ FOTO DARI API
@ -92,14 +93,23 @@ export default function UpdateAgentForm({ id }: { id: number }) {
const onSubmit = async (data: AgentFormValues) => { const onSubmit = async (data: AgentFormValues) => {
try { try {
const formData = new FormData(); const formData = new FormData();
formData.append("name", data.fullName); formData.append("name", data.fullName);
formData.append("job_title", data.roles[0]); // single role formData.append("job_title", data.job_title);
formData.append("phone", data.phone); formData.append("phone", data.phone);
// ✅ MULTI agent_type
formData.append("agent_type", JSON.stringify(data.roles));
if (file) { if (file) {
formData.append("file", file); formData.append("file", file);
} }
// DEBUG
for (const pair of formData.entries()) {
console.log(pair[0], pair[1]);
}
await updateAgent(id, formData); await updateAgent(id, formData);
MySwal.fire({ MySwal.fire({
@ -137,12 +147,12 @@ export default function UpdateAgentForm({ id }: { id: number }) {
<FormField <FormField
control={form.control} control={form.control}
name="position" name="job_title"
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormLabel>Jabatan</FormLabel> <FormLabel>Jabatan</FormLabel>
<FormControl> <FormControl>
<Input {...field} readOnly /> <Input {...field} />
</FormControl> </FormControl>
</FormItem> </FormItem>
)} )}
@ -171,21 +181,27 @@ export default function UpdateAgentForm({ id }: { id: number }) {
key={role} key={role}
control={form.control} control={form.control}
name="roles" name="roles"
render={({ field }) => ( render={({ field }) => {
<FormItem className="flex items-center gap-2"> const selected = field.value || [];
<FormControl>
<Checkbox return (
checked={field.value?.includes(role)} <FormItem className="flex items-center gap-2">
onCheckedChange={(checked) => <FormControl>
field.onChange(checked ? [role] : []) <Checkbox
} checked={selected.includes(role)}
/> onCheckedChange={(checked) => {
</FormControl> const updated = checked
<span className="capitalize"> ? [...selected, role] // ➕ tambah
{role.replace("_", " ")} : selected.filter((r) => r !== role); // ➖ hapus
</span>
</FormItem> field.onChange(updated);
)} }}
/>
</FormControl>
<span>{role}</span>
</FormItem>
);
}}
/> />
))} ))}
</div> </div>

2
components/form/product/detail-product-form.tsx
View File

@ -365,7 +365,7 @@ export default function DetailProductForm(props: { isDetail: boolean }) {
<Card className="w-full border-none shadow-md"> <Card className="w-full border-none shadow-md">
<CardHeader> <CardHeader>
<CardTitle className="text-xl font-bold text-teal-900"> <CardTitle className="text-xl font-bold text-teal-900">
Edit Produk Detail Produk
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>

4
components/landing-page/retracting-sidedar.tsx
View File

@ -245,9 +245,9 @@ const SidebarContent = ({
> >
<p className="text-lg font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-white dark:text-white"> <p className="text-lg font-bold bg-gradient-to-r from-slate-800 to-slate-600 bg-clip-text text-white dark:text-white">
JAECOO{" "} JAECOO{" "}
<span className="text-lg font-normal"> {/* <span className="text-lg font-normal">
{userRoleId != null ? roleLabel[userRoleId] : ""} {userRoleId != null ? roleLabel[userRoleId] : ""}
</span> </span> */}
</p> </p>
{/* <span className="text-xs text-slate-500">Admin Panel</span> */} {/* <span className="text-xs text-slate-500">Admin Panel</span> */}
</motion.div> </motion.div>

2
components/table/agent-table.tsx
View File

@ -381,7 +381,7 @@ export default function AgentTable() {
<div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200"> <div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200">
{/* Header */} {/* Header */}
<div className="bg-[#0F6C75] text-white text-lg rounded-t-sm px-6 py-3"> <div className="bg-[#0F6C75] text-white text-lg rounded-t-sm px-6 py-3">
Daftar Product Daftar Agen
</div> </div>
{/* Table */} {/* Table */}

10
components/table/costumer-service-table.tsx
View File

@ -104,14 +104,14 @@ export default function CostumerServiceTable() {
endDate: null, endDate: null,
}); });
const [userLevelId, setUserLevelId] = useState<string | null>(null); const [userRoleId, setUserRoleId] = useState<string | null>(null);
const router = useRouter(); const router = useRouter();
// 🔹 Ambil userlevelId dari cookies // 🔹 Ambil userlevelId dari cookies
useEffect(() => { useEffect(() => {
const ulne = Cookies.get("ulne"); // contoh: "3" const urie = Cookies.get("urie"); // contoh: "3"
setUserLevelId(ulne ?? null); setUserRoleId(urie ?? null);
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -320,7 +320,7 @@ export default function CostumerServiceTable() {
return cellValue; return cellValue;
} }
}, },
[article, page] [article, page],
); );
let typingTimer: NodeJS.Timeout; let typingTimer: NodeJS.Timeout;
@ -354,7 +354,7 @@ export default function CostumerServiceTable() {
Sales Sales
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
{userLevelId !== "3" && ( {userRoleId !== "1" && (
<Link href={"/admin/product/create"}> <Link href={"/admin/product/create"}>
<Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2"> <Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />

4
components/table/product-table.tsx
View File

@ -522,7 +522,7 @@ export default function ProductTable() {
</Button> </Button>
</Link> </Link>
)} )}
{userRoleId === "1" && item.status_id === 1 && ( {/* {userRoleId === "1" && item.status_id === 1 && (
<> <>
<Button <Button
variant="ghost" variant="ghost"
@ -543,7 +543,7 @@ export default function ProductTable() {
Reject Reject
</Button> </Button>
</> </>
)} )} */}
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"

2
components/table/promotion-table.tsx
View File

@ -383,7 +383,7 @@ export default function PromotionTable() {
<div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200"> <div className="w-full overflow-x-auto rounded-2xl shadow-sm border border-gray-200">
{/* Header */} {/* Header */}
<div className="bg-[#0F6C75] text-white text-lg rounded-t-sm px-6 py-3"> <div className="bg-[#0F6C75] text-white text-lg rounded-t-sm px-6 py-3">
Daftar Product Daftar Promo
</div> </div>
{/* Table */} {/* Table */}

10
components/table/services-table.tsx
View File

@ -104,14 +104,14 @@ export default function ServicesTable() {
endDate: null, endDate: null,
}); });
const [userLevelId, setUserLevelId] = useState<string | null>(null); const [userRoleId, setUserRoleId] = useState<string | null>(null);
const router = useRouter(); const router = useRouter();
// 🔹 Ambil userlevelId dari cookies // 🔹 Ambil userlevelId dari cookies
useEffect(() => { useEffect(() => {
const ulne = Cookies.get("ulne"); // contoh: "3" const urie = Cookies.get("urie"); // contoh: "3"
setUserLevelId(ulne ?? null); setUserRoleId(urie ?? null);
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -320,7 +320,7 @@ export default function ServicesTable() {
return cellValue; return cellValue;
} }
}, },
[article, page] [article, page],
); );
let typingTimer: NodeJS.Timeout; let typingTimer: NodeJS.Timeout;
@ -354,7 +354,7 @@ export default function ServicesTable() {
After Sales After Sales
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
{userLevelId !== "3" && ( {userRoleId !== "1" && (
<Link href={"/admin/product/create"}> <Link href={"/admin/product/create"}>
<Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2"> <Button className="bg-[#1F6779] text-white w-full lg:w-fit hover:bg-[#1a9bb5] flex items-center gap-2">
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />