feat(hackathon): draft data table column & API Contract

This commit is contained in:
Hafid Nur
2025-11-30 18:54:34 +07:00
parent 5faba43728
commit 1343404e01
8 changed files with 200 additions and 360 deletions
@@ -1,41 +0,0 @@
import { FC } from 'react';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
}
const ModalDeleteUser: FC<ModalProps> = ({ isOpen, onClose }) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
<div className="fixed inset-0 flex items-center justify-center p-4">
<div className="bg-white rounded-lg shadow w-full max-w-md">
<div className="border-b px-6 py-4 flex justify-between items-center">
<h2 className="text-p3 font-semibold">Delete User</h2>
<button className="p-2" onClick={onClose}>
</button>
</div>
<div className="p-6">
<p className="text-label2 text-neutral-700">
Are you sure you want to delete this user? This action cannot be
undone.
</p>
<div className="flex justify-end gap-2 mt-4">
<button className="px-3 py-2 rounded-md border" onClick={onClose}>
Cancel
</button>
<button className="px-3 py-2 rounded-md bg-red-600 text-white">
Delete
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default ModalDeleteUser;
@@ -1,42 +0,0 @@
import { FC } from 'react';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
}
const ModalSuspendOrBan: FC<ModalProps> = ({ isOpen, onClose }) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
<div className="fixed inset-0 flex items-center justify-center p-4">
<div className="bg-white rounded-lg shadow w-full max-w-lg">
<div className="border-b px-6 py-4 flex justify-between items-center">
<h2 className="text-p3 font-semibold">Suspend or Ban User</h2>
<button className="p-2" onClick={onClose}>
</button>
</div>
<div className="p-6 flex flex-col gap-4">
<label className="text-label2 text-neutral-700">Reason</label>
<textarea
className="border border-neutral-200 rounded-md px-3 py-2"
rows={4}
/>
<div className="flex justify-end gap-2 mt-2">
<button className="px-3 py-2 rounded-md border" onClick={onClose}>
Cancel
</button>
<button className="px-3 py-2 rounded-md bg-amber-600 text-white">
Suspend
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default ModalSuspendOrBan;
@@ -1,47 +0,0 @@
import { FC } from 'react';
interface ModalProps {
isOpen: boolean;
onClose: () => void;
}
const ModalUserDetail: FC<ModalProps> = ({ isOpen, onClose }) => {
if (!isOpen) return null;
return (
<div className="fixed inset-0 z-50">
<div className="fixed inset-0 bg-black/50" onClick={onClose} />
<div className="fixed inset-0 flex items-center justify-center p-4">
<div className="bg-white rounded-lg shadow w-full max-w-3xl">
<div className="border-b px-6 py-4 flex justify-between items-center">
<h2 className="text-p3 font-semibold">User Detail</h2>
<button className="p-2" onClick={onClose}>
</button>
</div>
<div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="text-label1 font-medium mb-2">Account Profile</h3>
<div className="text-label2 text-neutral-600">
Email, provider, createdAt
</div>
</div>
<div>
<h3 className="text-label1 font-medium mb-2">Detail Profile</h3>
<div className="text-label2 text-neutral-600">
Name, phone, city
</div>
</div>
<div className="md:col-span-2">
<h3 className="text-label1 font-medium mb-2">Activity Log</h3>
<div className="text-label2 text-neutral-600">
Recent actions...
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default ModalUserDetail;