again n again
This commit is contained in:
Randa Firman Putra
@@ -419,7 +419,7 @@ export default function MKBelumDiambilChart({
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Memuat data mata kuliah belum diambil...
|
||||
Loading...
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
802
components/datatable/kelolaakun/data-table-akun.tsx
Normal file
802
components/datatable/kelolaakun/data-table-akun.tsx
Normal file
@@ -0,0 +1,802 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
DialogClose
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import {
|
||||
PlusCircle,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Search,
|
||||
X,
|
||||
Loader2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
KeyRound
|
||||
} from "lucide-react";
|
||||
import { useToast } from "@/components/ui/toast-provider";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
// Define the User type
|
||||
interface UserApp {
|
||||
id_user: number;
|
||||
username: string;
|
||||
nip: string | null;
|
||||
role_user: 'admin' | 'ketuajurusan' | 'ketuaprodi';
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export default function DataTableAkun() {
|
||||
const { showSuccess, showError } = useToast();
|
||||
|
||||
// State for data
|
||||
const [users, setUsers] = useState<UserApp[]>([]);
|
||||
const [filteredData, setFilteredData] = useState<UserApp[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// State for filtering
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [roleFilter, setRoleFilter] = useState<string>("all");
|
||||
|
||||
// State for pagination
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [paginatedData, setPaginatedData] = useState<UserApp[]>([]);
|
||||
|
||||
// State for form
|
||||
const [formMode, setFormMode] = useState<"add" | "edit" | "reset-password">("add");
|
||||
const [formData, setFormData] = useState<Partial<UserApp & { password: string }>>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
// State for delete confirmation
|
||||
const [deleteId, setDeleteId] = useState<number | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
|
||||
// Fetch data on component mount
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
// Filter data when search term or role filter changes
|
||||
useEffect(() => {
|
||||
filterData();
|
||||
}, [searchTerm, roleFilter, users]);
|
||||
|
||||
// Update paginated data when filtered data or pagination settings change
|
||||
useEffect(() => {
|
||||
paginateData();
|
||||
}, [filteredData, currentPage, pageSize]);
|
||||
|
||||
// Fetch users data from API
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch("/api/keloladata/data-akun");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch data");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setUsers(data);
|
||||
setFilteredData(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError("Error fetching data. Please try again later.");
|
||||
console.error("Error fetching data:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Filter data based on search term and role
|
||||
const filterData = () => {
|
||||
let filtered = [...users];
|
||||
|
||||
// Filter by search term
|
||||
if (searchTerm) {
|
||||
filtered = filtered.filter(
|
||||
(item) =>
|
||||
(item.username?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
|
||||
(item.nip?.toLowerCase() || "").includes(searchTerm.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
// Filter by role
|
||||
if (roleFilter && roleFilter !== "all") {
|
||||
filtered = filtered.filter((item) => item.role_user === roleFilter);
|
||||
}
|
||||
|
||||
setFilteredData(filtered);
|
||||
// Reset to first page when filters change
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
// Paginate data
|
||||
const paginateData = () => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setPaginatedData(filteredData.slice(startIndex, endIndex));
|
||||
};
|
||||
|
||||
// Get total number of pages
|
||||
const getTotalPages = () => {
|
||||
return Math.ceil(filteredData.length / pageSize);
|
||||
};
|
||||
|
||||
// Handle page change
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
// Handle page size change
|
||||
const handlePageSizeChange = (size: string) => {
|
||||
setPageSize(Number(size));
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
// Reset form data
|
||||
const resetForm = () => {
|
||||
setFormData({});
|
||||
setShowPassword(false);
|
||||
};
|
||||
|
||||
// Handle form input changes
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
// Handle role select change
|
||||
const handleRoleChange = (value: string) => {
|
||||
setFormData((prev) => ({ ...prev, role_user: value as 'admin' | 'ketuajurusan' | 'ketuaprodi' }));
|
||||
};
|
||||
|
||||
// Open form dialog for adding new user
|
||||
const handleAdd = () => {
|
||||
setFormMode("add");
|
||||
resetForm();
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
// Open form dialog for editing user
|
||||
const handleEdit = (data: UserApp) => {
|
||||
setFormMode("edit");
|
||||
setFormData({ ...data, password: "" }); // Don't include password in edit form initially
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
// Open form dialog for resetting password
|
||||
const handleResetPassword = (data: UserApp) => {
|
||||
setFormMode("reset-password");
|
||||
setFormData({
|
||||
id_user: data.id_user,
|
||||
username: data.username,
|
||||
nip: data.nip,
|
||||
role_user: data.role_user,
|
||||
password: ""
|
||||
});
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
// Open delete confirmation dialog
|
||||
const handleDeleteConfirm = (id: number) => {
|
||||
setDeleteId(id);
|
||||
setIsDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validation
|
||||
if (formMode !== "reset-password") {
|
||||
if (!formData.username?.trim()) {
|
||||
showError("Username harus diisi");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.role_user) {
|
||||
showError("Role user harus dipilih");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (formMode === "add" && !formData.password?.trim()) {
|
||||
showError("Password harus diisi untuk user baru");
|
||||
return;
|
||||
}
|
||||
|
||||
if (formMode === "reset-password" && !formData.password?.trim()) {
|
||||
showError("Password baru harus diisi");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
let response;
|
||||
|
||||
if (formMode === "add") {
|
||||
// Create new user
|
||||
response = await fetch("/api/keloladata/data-akun", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: formData.username?.trim(),
|
||||
nip: formData.nip?.trim() || null,
|
||||
password: formData.password,
|
||||
role_user: formData.role_user,
|
||||
}),
|
||||
});
|
||||
} else {
|
||||
// Update existing user (edit or reset password)
|
||||
const updateData: any = {
|
||||
id_user: formData.id_user,
|
||||
username: formData.username?.trim(),
|
||||
nip: formData.nip?.trim() || null,
|
||||
role_user: formData.role_user,
|
||||
};
|
||||
|
||||
// Include password if it's provided
|
||||
if (formData.password?.trim()) {
|
||||
updateData.password = formData.password;
|
||||
}
|
||||
|
||||
response = await fetch("/api/keloladata/data-akun", {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(updateData),
|
||||
});
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Failed to save data");
|
||||
}
|
||||
|
||||
await fetchUsers();
|
||||
setIsDialogOpen(false);
|
||||
resetForm();
|
||||
|
||||
if (formMode === "add") {
|
||||
showSuccess("User berhasil ditambahkan");
|
||||
} else if (formMode === "reset-password") {
|
||||
showSuccess("Password berhasil direset");
|
||||
} else {
|
||||
showSuccess("User berhasil diperbarui");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error saving data:", err);
|
||||
showError(err instanceof Error ? err.message : "Gagal menyimpan data");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle delete
|
||||
const handleDelete = async () => {
|
||||
if (deleteId === null) return;
|
||||
|
||||
setIsDeleting(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/keloladata/data-akun?id_user=${deleteId}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || "Failed to delete user");
|
||||
}
|
||||
|
||||
await fetchUsers();
|
||||
setIsDeleteDialogOpen(false);
|
||||
setDeleteId(null);
|
||||
showSuccess("User berhasil dihapus");
|
||||
} catch (err) {
|
||||
console.error("Error deleting data:", err);
|
||||
showError(err instanceof Error ? err.message : "Gagal menghapus user");
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Get role badge color
|
||||
const getRoleBadgeColor = (role: string) => {
|
||||
switch (role) {
|
||||
case 'admin':
|
||||
return 'bg-red-500 hover:bg-red-600';
|
||||
case 'ketuajurusan':
|
||||
return 'bg-blue-500 hover:bg-blue-600';
|
||||
case 'ketuaprodi':
|
||||
return 'bg-green-500 hover:bg-green-600';
|
||||
default:
|
||||
return 'bg-gray-500 hover:bg-gray-600';
|
||||
}
|
||||
};
|
||||
|
||||
// Get role label
|
||||
const getRoleLabel = (role: string) => {
|
||||
switch (role) {
|
||||
case 'admin':
|
||||
return 'Admin';
|
||||
case 'ketuajurusan':
|
||||
return 'Ketua Jurusan';
|
||||
case 'ketuaprodi':
|
||||
return 'Ketua Prodi';
|
||||
default:
|
||||
return role;
|
||||
}
|
||||
};
|
||||
|
||||
// Calculate the range of entries being displayed
|
||||
function getDisplayRange() {
|
||||
if (filteredData.length === 0) return { start: 0, end: 0 };
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, filteredData.length);
|
||||
|
||||
return { start, end };
|
||||
}
|
||||
|
||||
// Generate pagination items
|
||||
function renderPaginationItems() {
|
||||
const totalPages = getTotalPages();
|
||||
const items = [];
|
||||
|
||||
// Always show first page
|
||||
items.push(
|
||||
<PaginationItem key="first">
|
||||
<PaginationLink
|
||||
isActive={currentPage === 1}
|
||||
onClick={() => handlePageChange(1)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
|
||||
// Show ellipsis if needed
|
||||
if (currentPage > 3) {
|
||||
items.push(
|
||||
<PaginationItem key="ellipsis-start">
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
// Show pages around current page
|
||||
for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
|
||||
if (i === 1 || i === totalPages) continue;
|
||||
items.push(
|
||||
<PaginationItem key={i}>
|
||||
<PaginationLink
|
||||
isActive={currentPage === i}
|
||||
onClick={() => handlePageChange(i)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{i}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
// Show ellipsis if needed
|
||||
if (currentPage < totalPages - 2) {
|
||||
items.push(
|
||||
<PaginationItem key="ellipsis-end">
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
// Always show last page if there's more than one page
|
||||
if (totalPages > 1) {
|
||||
items.push(
|
||||
<PaginationItem key="last">
|
||||
<PaginationLink
|
||||
isActive={currentPage === totalPages}
|
||||
onClick={() => handlePageChange(totalPages)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{totalPages}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
return items;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="text-center text-red-500 p-4">
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Header and Actions */}
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold dark:text-white">Kelola Akun</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Kelola akun pengguna sistem PODIF
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleAdd} className="gap-2">
|
||||
<PlusCircle className="h-4 w-4" />
|
||||
Tambah Akun
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Cari username atau NIP..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-8"
|
||||
/>
|
||||
{searchTerm && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-1 top-1 h-7 w-7 p-0"
|
||||
onClick={() => setSearchTerm("")}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Select value={roleFilter} onValueChange={setRoleFilter}>
|
||||
<SelectTrigger className="w-full sm:w-[200px]">
|
||||
<SelectValue placeholder="Filter Role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Semua Role</SelectItem>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
<SelectItem value="ketuajurusan">Ketua Jurusan</SelectItem>
|
||||
<SelectItem value="ketuaprodi">Ketua Prodi</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Table Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-muted-foreground">Show</span>
|
||||
<Select
|
||||
value={pageSize.toString()}
|
||||
onValueChange={handlePageSizeChange}
|
||||
>
|
||||
<SelectTrigger className="w-[80px]">
|
||||
<SelectValue placeholder={pageSize.toString()} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="25">25</SelectItem>
|
||||
<SelectItem value="50">50</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span className="text-sm text-muted-foreground">entries</span>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
<div className="border rounded-md">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50 dark:bg-slate-800">
|
||||
<TableHead className="font-semibold text-center">No</TableHead>
|
||||
<TableHead className="font-semibold">Username</TableHead>
|
||||
<TableHead className="font-semibold">NIP</TableHead>
|
||||
<TableHead className="font-semibold text-center">Role</TableHead>
|
||||
<TableHead className="font-semibold text-center">Aksi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center py-8 text-muted-foreground">
|
||||
Tidak ada data yang tersedia
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((user, index) => (
|
||||
<TableRow
|
||||
key={user.id_user}
|
||||
className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
|
||||
>
|
||||
<TableCell className="text-center font-medium dark:text-white">
|
||||
{(currentPage - 1) * pageSize + index + 1}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium dark:text-white">
|
||||
{user.username}
|
||||
</TableCell>
|
||||
<TableCell className="dark:text-white">
|
||||
{user.nip || '-'}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge className={`${getRoleBadgeColor(user.role_user)} text-white`}>
|
||||
{getRoleLabel(user.role_user)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(user)}
|
||||
className="gap-1"
|
||||
>
|
||||
<Pencil className="h-3 w-3" />
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleResetPassword(user)}
|
||||
className="gap-1"
|
||||
>
|
||||
<KeyRound className="h-3 w-3" />
|
||||
Reset
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => handleDeleteConfirm(user.id_user)}
|
||||
className="gap-1"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
Hapus
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{!loading && !error && filteredData.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Showing {getDisplayRange().start} to {getDisplayRange().end} of {filteredData.length} entries
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
|
||||
className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
|
||||
/>
|
||||
</PaginationItem>
|
||||
|
||||
{renderPaginationItems()}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
onClick={() => handlePageChange(Math.min(getTotalPages(), currentPage + 1))}
|
||||
className={currentPage === getTotalPages() ? "pointer-events-none opacity-50" : "cursor-pointer"}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form Dialog */}
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{formMode === "add" ? "Tambah Akun Baru" : formMode === "reset-password" ? "Reset Password" : "Edit Akun"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 py-4">
|
||||
{formMode !== "reset-password" && (
|
||||
<>
|
||||
<div className="grid gap-2">
|
||||
<label htmlFor="username" className="text-sm font-medium">
|
||||
Username <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
id="username"
|
||||
name="username"
|
||||
value={formData.username || ""}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan username"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label htmlFor="nip" className="text-sm font-medium">
|
||||
NIP (Opsional)
|
||||
</label>
|
||||
<Input
|
||||
id="nip"
|
||||
name="nip"
|
||||
value={formData.nip || ""}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan NIP"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<label htmlFor="role_user" className="text-sm font-medium">
|
||||
Role <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formData.role_user || ""}
|
||||
onValueChange={handleRoleChange}
|
||||
required
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Pilih role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
<SelectItem value="ketuajurusan">Ketua Jurusan</SelectItem>
|
||||
<SelectItem value="ketuaprodi">Ketua Prodi</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{formMode === "reset-password" && (
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 p-3 rounded-md">
|
||||
<p className="text-sm text-blue-700 dark:text-blue-300">
|
||||
Reset password untuk user: <span className="font-bold">{formData.username}</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{(formMode === "add" || formMode === "reset-password" || formMode === "edit") && (
|
||||
<div className="grid gap-2">
|
||||
<label htmlFor="password" className="text-sm font-medium">
|
||||
{formMode === "reset-password" ? "Password Baru" : "Password"}
|
||||
{formMode === "add" && <span className="text-red-500"> *</span>}
|
||||
{formMode === "edit" && <span className="text-xs text-muted-foreground ml-2">(Kosongkan jika tidak ingin mengubah)</span>}
|
||||
</label>
|
||||
<div className="relative flex items-center">
|
||||
<Input
|
||||
id="password"
|
||||
name="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
value={formData.password || ""}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Masukkan password"
|
||||
required={formMode === "add" || formMode === "reset-password"}
|
||||
className="pr-10"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="h-4 w-4" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline" disabled={isSubmitting}>
|
||||
Batal
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Menyimpan...
|
||||
</>
|
||||
) : (
|
||||
"Simpan"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Konfirmasi Hapus</DialogTitle>
|
||||
</DialogHeader>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Apakah Anda yakin ingin menghapus akun ini? Tindakan ini tidak dapat dibatalkan.
|
||||
</p>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button variant="outline" disabled={isDeleting}>
|
||||
Batal
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Menghapus...
|
||||
</>
|
||||
) : (
|
||||
"Hapus"
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -129,7 +129,7 @@ const Navbar = () => {
|
||||
{/* Desktop Navigation - Centered */}
|
||||
<div className="hidden md:flex items-center gap-4">
|
||||
{/* Dashboard - Only for Ketua Jurusan */}
|
||||
{user && user.role_user === 'ketuajurusan' && (
|
||||
{user && (user.role_user === 'ketuajurusan' || user.role_user === 'ketuaprodi') && (
|
||||
<>
|
||||
<Link href="/dashboard" className="flex items-center gap-2 px-3 py-2 text-sm font-medium hover:text-primary transition-colors">
|
||||
<BarChart className="h-4 w-4" />
|
||||
@@ -232,6 +232,12 @@ const Navbar = () => {
|
||||
Nilai Mahasiswa
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/keloladata/akun" className="flex items-center gap-2 w-full">
|
||||
<User className="h-4 w-4" />
|
||||
Akun
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
@@ -245,13 +251,17 @@ const Navbar = () => {
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="flex items-center gap-2">
|
||||
<User className="h-4 w-4" />
|
||||
{user.role_user === 'ketuajurusan' ? 'Ketua Jurusan' : 'Admin'}
|
||||
{user.role_user === 'ketuajurusan'
|
||||
? 'Ketua Jurusan'
|
||||
: user.role_user === 'ketuaprodi'
|
||||
? 'Ketua Prodi'
|
||||
: 'Admin'}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem disabled>
|
||||
<User className="h-4 w-4 mr-2" />
|
||||
{user.role_user === 'ketuajurusan' ? user.username : user.username}
|
||||
{user.username}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleLogout}>
|
||||
@@ -300,7 +310,7 @@ const MobileNavContent = ({ user, onLogout }: MobileNavContentProps) => {
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-semibold text-muted-foreground">Menu Utama</h3>
|
||||
{/* Dashboard - Only for Ketua Jurusan */}
|
||||
{user.role_user === 'ketuajurusan' && (
|
||||
{(user.role_user === 'ketuajurusan' || user.role_user === 'ketuaprodi') && (
|
||||
<Link href="/dashboard" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
|
||||
<BarChart className="h-4 w-4" />
|
||||
Dashboard
|
||||
@@ -359,6 +369,10 @@ const MobileNavContent = ({ user, onLogout }: MobileNavContentProps) => {
|
||||
<BookOpenText className="h-4 w-4" />
|
||||
Nilai Mahasiswa
|
||||
</Link>
|
||||
<Link href="/keloladata/akun" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
|
||||
<User className="h-4 w-4" />
|
||||
Akun
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user