[CLAUDE] Phase1.2: CRUD Master + Permission Matrix + FE admin pages
Backend:
- Domain/Master: Supplier (+ SupplierType 5 loai), Project, Department (AuditableEntity)
- Domain/Identity: MenuItem, Permission, MenuKeys const (12 menu)
- EF Configurations voi unique Code + query filter IsDeleted
- DbSets + IApplicationDbContext interface update
- Application: PagedResult + PagedRequest generic
- Application/Master CQRS CRUD 3 entity (Create/Update/Delete/Get/List voi paging search sort)
- Application/Permissions: GetMyMenuTree (union OR role, filter tree), ListMenuItems, ListPermissionsByRole, UpsertPermission (guard admin khong tu giam quyen), ListRoles
- Api/Authorization: MenuPermissionRequirement + Handler (Admin bypass, query DB)
- Program.cs: register 48 policy {menu}.{action} tu MenuKeys x Actions
- Api/Controllers: Suppliers, Projects, Departments, Menus, Roles, Permissions
- DbInitializer: seed 12 menu + admin full CRUD permissions
- Migration AddMasterData + AddPermissions
Frontend (fe-admin):
- Types: menuKeys.ts const, menu.ts (MenuNode/Role/Permission), master.ts (Supplier/Project/Department + SupplierType const-object)
- AuthContext: load menu from /menus/me, cache localStorage, refreshMenu()
- usePermission hook + PermissionGuard component (wrap button)
- UI kit them: Dialog (modal overlay), Textarea, Select
- Generic: DataTable (column config, sortable, loading, empty) + Pagination
- PageHeader component
- apiError helper extract message tu ProblemDetails
- Layout rewrite: render menu dong tu AuthContext.menu (MenuGroup collapsible + NavLink + lucide icon map)
- Pages: master/Suppliers, master/Projects, master/Departments (CRUD + search + sort + paging + Dialog form)
- Page system/Permissions: ma tran Role x MenuKey x CRUD checkbox (tick tu dong PUT upsert)
- App.tsx them 4 route moi
Bug fix:
- MenuPermissionHandler: EF expression tree khong support switch expression -> tach switch ra ngoai AnyAsync
- TS erasableSyntaxOnly khong cho enum -> SupplierType const-object pattern (typeof[keyof])
E2E verified via Vite proxy:
- GET /menus/me -> 6 root + 6 child nodes (12 menus)
- GET /roles -> 12 roles
- POST/GET/PUT/DELETE /suppliers -> full CRUD, soft delete OK
- tsc -b fe-admin pass
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
160
fe-admin/src/pages/master/DepartmentsPage.tsx
Normal file
160
fe-admin/src/pages/master/DepartmentsPage.tsx
Normal file
@ -0,0 +1,160 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Pencil, Plus, Trash2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { PageHeader } from '@/components/PageHeader'
|
||||
import { DataTable, Pagination, type Column } from '@/components/DataTable'
|
||||
import { PermissionGuard } from '@/components/PermissionGuard'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Label } from '@/components/ui/Label'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { Dialog } from '@/components/ui/Dialog'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import { MenuKeys } from '@/lib/menuKeys'
|
||||
import type { Department, Paged } from '@/types/master'
|
||||
|
||||
type FormState = { id?: string; code: string; name: string; note: string }
|
||||
const emptyForm: FormState = { code: '', name: '', note: '' }
|
||||
|
||||
export function DepartmentsPage() {
|
||||
const qc = useQueryClient()
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
const [sortBy, setSortBy] = useState<string | undefined>()
|
||||
const [sortDesc, setSortDesc] = useState(true)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [form, setForm] = useState<FormState>(emptyForm)
|
||||
const isEdit = !!form.id
|
||||
|
||||
const list = useQuery({
|
||||
queryKey: ['departments', { page, search, sortBy, sortDesc }],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<Paged<Department>>('/departments', {
|
||||
params: { page, pageSize: 20, search: search || undefined, sortBy, sortDesc },
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
})
|
||||
|
||||
const mutate = useMutation({
|
||||
mutationFn: async (d: FormState) => {
|
||||
const payload = { id: d.id, code: d.code, name: d.name, managerUserId: null, note: d.note || null }
|
||||
if (d.id) await api.put(`/departments/${d.id}`, payload)
|
||||
else await api.post('/departments', payload)
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['departments'] })
|
||||
toast.success(isEdit ? 'Đã cập nhật phòng ban' : 'Đã thêm phòng ban')
|
||||
setOpen(false)
|
||||
setForm(emptyForm)
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
const remove = useMutation({
|
||||
mutationFn: (id: string) => api.delete(`/departments/${id}`),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['departments'] })
|
||||
toast.success('Đã xóa')
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
const columns: Column<Department>[] = [
|
||||
{ key: 'code', header: 'Mã', sortable: true, render: d => <span className="font-mono text-xs">{d.code}</span>, width: 'w-32' },
|
||||
{ key: 'name', header: 'Tên phòng ban', sortable: true, render: d => d.name },
|
||||
{ key: 'note', header: 'Ghi chú', render: d => d.note ?? '—' },
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
align: 'right',
|
||||
width: 'w-28',
|
||||
render: d => (
|
||||
<div className="flex justify-end gap-1">
|
||||
<PermissionGuard menuKey={MenuKeys.Departments} action="Update">
|
||||
<Button size="sm" variant="ghost" onClick={() => {
|
||||
setForm({ id: d.id, code: d.code, name: d.name, note: d.note ?? '' })
|
||||
setOpen(true)
|
||||
}}>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
<PermissionGuard menuKey={MenuKeys.Departments} action="Delete">
|
||||
<Button size="sm" variant="ghost" onClick={() => {
|
||||
if (confirm(`Xóa phòng ban "${d.name}"?`)) remove.mutate(d.id)
|
||||
}}>
|
||||
<Trash2 className="h-3.5 w-3.5 text-red-500" />
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageHeader
|
||||
title="Phòng ban"
|
||||
actions={
|
||||
<PermissionGuard menuKey={MenuKeys.Departments} action="Create">
|
||||
<Button onClick={() => { setForm(emptyForm); setOpen(true) }}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Thêm phòng ban
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="mb-3 flex gap-2">
|
||||
<Input
|
||||
placeholder="Tìm…"
|
||||
value={search}
|
||||
onChange={e => { setSearch(e.target.value); setPage(1) }}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={list.data?.items ?? []}
|
||||
getRowKey={d => d.id}
|
||||
isLoading={list.isLoading}
|
||||
sortBy={sortBy}
|
||||
sortDesc={sortDesc}
|
||||
onSortChange={(k, desc) => { setSortBy(k); setSortDesc(desc) }}
|
||||
/>
|
||||
<Pagination page={page} pageSize={20} total={list.data?.total ?? 0} onChange={setPage} />
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
title={isEdit ? 'Sửa phòng ban' : 'Thêm phòng ban mới'}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>Hủy</Button>
|
||||
<Button onClick={(e: FormEvent) => { e.preventDefault(); mutate.mutate(form) }} disabled={mutate.isPending}>
|
||||
{mutate.isPending ? 'Đang lưu…' : 'Lưu'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form className="space-y-4" onSubmit={e => { e.preventDefault(); mutate.mutate(form) }}>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Mã phòng ban *</Label>
|
||||
<Input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} required />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Tên phòng ban *</Label>
|
||||
<Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Ghi chú</Label>
|
||||
<Textarea rows={3} value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} />
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
214
fe-admin/src/pages/master/ProjectsPage.tsx
Normal file
214
fe-admin/src/pages/master/ProjectsPage.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Pencil, Plus, Trash2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { PageHeader } from '@/components/PageHeader'
|
||||
import { DataTable, Pagination, type Column } from '@/components/DataTable'
|
||||
import { PermissionGuard } from '@/components/PermissionGuard'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Label } from '@/components/ui/Label'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { Dialog } from '@/components/ui/Dialog'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import { MenuKeys } from '@/lib/menuKeys'
|
||||
import type { Paged, Project } from '@/types/master'
|
||||
|
||||
type FormState = {
|
||||
id?: string
|
||||
code: string
|
||||
name: string
|
||||
startDate: string
|
||||
endDate: string
|
||||
budgetTotal: string
|
||||
note: string
|
||||
}
|
||||
|
||||
const emptyForm: FormState = { code: '', name: '', startDate: '', endDate: '', budgetTotal: '', note: '' }
|
||||
|
||||
const fmtMoney = (v: number | null) => (v == null ? '—' : v.toLocaleString('vi-VN'))
|
||||
const fmtDate = (s: string | null) => (s ? new Date(s).toLocaleDateString('vi-VN') : '—')
|
||||
|
||||
export function ProjectsPage() {
|
||||
const qc = useQueryClient()
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
const [sortBy, setSortBy] = useState<string | undefined>()
|
||||
const [sortDesc, setSortDesc] = useState(true)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [form, setForm] = useState<FormState>(emptyForm)
|
||||
const isEdit = !!form.id
|
||||
|
||||
const list = useQuery({
|
||||
queryKey: ['projects', { page, search, sortBy, sortDesc }],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<Paged<Project>>('/projects', {
|
||||
params: { page, pageSize: 20, search: search || undefined, sortBy, sortDesc },
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
})
|
||||
|
||||
const mutate = useMutation({
|
||||
mutationFn: async (d: FormState) => {
|
||||
const payload = {
|
||||
id: d.id,
|
||||
code: d.code,
|
||||
name: d.name,
|
||||
startDate: d.startDate || null,
|
||||
endDate: d.endDate || null,
|
||||
managerUserId: null,
|
||||
budgetTotal: d.budgetTotal ? Number(d.budgetTotal) : null,
|
||||
note: d.note || null,
|
||||
}
|
||||
if (d.id) await api.put(`/projects/${d.id}`, payload)
|
||||
else await api.post('/projects', payload)
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['projects'] })
|
||||
toast.success(isEdit ? 'Đã cập nhật dự án' : 'Đã thêm dự án')
|
||||
setOpen(false)
|
||||
setForm(emptyForm)
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
const remove = useMutation({
|
||||
mutationFn: (id: string) => api.delete(`/projects/${id}`),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['projects'] })
|
||||
toast.success('Đã xóa')
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
function openEdit(p: Project) {
|
||||
setForm({
|
||||
id: p.id,
|
||||
code: p.code,
|
||||
name: p.name,
|
||||
startDate: p.startDate ? p.startDate.slice(0, 10) : '',
|
||||
endDate: p.endDate ? p.endDate.slice(0, 10) : '',
|
||||
budgetTotal: p.budgetTotal?.toString() ?? '',
|
||||
note: p.note ?? '',
|
||||
})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
const columns: Column<Project>[] = [
|
||||
{ key: 'code', header: 'Mã DA', sortable: true, render: p => <span className="font-mono text-xs">{p.code}</span>, width: 'w-32' },
|
||||
{ key: 'name', header: 'Tên dự án', sortable: true, render: p => p.name },
|
||||
{ key: 'startDate', header: 'Bắt đầu', render: p => fmtDate(p.startDate), width: 'w-32' },
|
||||
{ key: 'endDate', header: 'Kết thúc', render: p => fmtDate(p.endDate), width: 'w-32' },
|
||||
{ key: 'budgetTotal', header: 'Ngân sách', align: 'right', render: p => fmtMoney(p.budgetTotal) },
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
align: 'right',
|
||||
width: 'w-28',
|
||||
render: p => (
|
||||
<div className="flex justify-end gap-1">
|
||||
<PermissionGuard menuKey={MenuKeys.Projects} action="Update">
|
||||
<Button size="sm" variant="ghost" onClick={() => openEdit(p)}>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
<PermissionGuard menuKey={MenuKeys.Projects} action="Delete">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
if (confirm(`Xóa dự án "${p.name}"?`)) remove.mutate(p.id)
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-red-500" />
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageHeader
|
||||
title="Dự án"
|
||||
description="Quản lý các dự án xây dựng — tham chiếu trong mã HĐ"
|
||||
actions={
|
||||
<PermissionGuard menuKey={MenuKeys.Projects} action="Create">
|
||||
<Button onClick={() => { setForm(emptyForm); setOpen(true) }}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Thêm dự án
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="mb-3 flex gap-2">
|
||||
<Input
|
||||
placeholder="Tìm theo mã, tên…"
|
||||
value={search}
|
||||
onChange={e => { setSearch(e.target.value); setPage(1) }}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={list.data?.items ?? []}
|
||||
getRowKey={p => p.id}
|
||||
isLoading={list.isLoading}
|
||||
sortBy={sortBy}
|
||||
sortDesc={sortDesc}
|
||||
onSortChange={(k, d) => { setSortBy(k); setSortDesc(d) }}
|
||||
/>
|
||||
<Pagination page={page} pageSize={20} total={list.data?.total ?? 0} onChange={setPage} />
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
title={isEdit ? 'Sửa dự án' : 'Thêm dự án mới'}
|
||||
size="md"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>Hủy</Button>
|
||||
<Button onClick={(e: FormEvent) => { e.preventDefault(); mutate.mutate(form) }} disabled={mutate.isPending}>
|
||||
{mutate.isPending ? 'Đang lưu…' : 'Lưu'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form
|
||||
className="grid grid-cols-2 gap-4"
|
||||
onSubmit={e => { e.preventDefault(); mutate.mutate(form) }}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Mã dự án *</Label>
|
||||
<Input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} required />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Ngân sách (VND)</Label>
|
||||
<Input type="number" value={form.budgetTotal} onChange={e => setForm({ ...form, budgetTotal: e.target.value })} />
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label>Tên dự án *</Label>
|
||||
<Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Ngày bắt đầu</Label>
|
||||
<Input type="date" value={form.startDate} onChange={e => setForm({ ...form, startDate: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Ngày kết thúc</Label>
|
||||
<Input type="date" value={form.endDate} onChange={e => setForm({ ...form, endDate: e.target.value })} />
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label>Ghi chú</Label>
|
||||
<Textarea rows={3} value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} />
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
253
fe-admin/src/pages/master/SuppliersPage.tsx
Normal file
253
fe-admin/src/pages/master/SuppliersPage.tsx
Normal file
@ -0,0 +1,253 @@
|
||||
import { useState, type FormEvent } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Pencil, Plus, Trash2 } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { PageHeader } from '@/components/PageHeader'
|
||||
import { DataTable, Pagination, type Column } from '@/components/DataTable'
|
||||
import { PermissionGuard } from '@/components/PermissionGuard'
|
||||
import { Button } from '@/components/ui/Button'
|
||||
import { Input } from '@/components/ui/Input'
|
||||
import { Label } from '@/components/ui/Label'
|
||||
import { Select } from '@/components/ui/Select'
|
||||
import { Textarea } from '@/components/ui/Textarea'
|
||||
import { Dialog } from '@/components/ui/Dialog'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import { MenuKeys } from '@/lib/menuKeys'
|
||||
import { SupplierType, SupplierTypeLabel, type Paged, type Supplier } from '@/types/master'
|
||||
|
||||
type FormState = {
|
||||
id?: string
|
||||
code: string
|
||||
name: string
|
||||
type: SupplierType
|
||||
taxCode: string
|
||||
phone: string
|
||||
email: string
|
||||
address: string
|
||||
contactPerson: string
|
||||
note: string
|
||||
}
|
||||
|
||||
const emptyForm: FormState = {
|
||||
code: '', name: '', type: SupplierType.NhaCungCap,
|
||||
taxCode: '', phone: '', email: '', address: '', contactPerson: '', note: '',
|
||||
}
|
||||
|
||||
export function SuppliersPage() {
|
||||
const qc = useQueryClient()
|
||||
const [page, setPage] = useState(1)
|
||||
const [search, setSearch] = useState('')
|
||||
const [sortBy, setSortBy] = useState<string | undefined>()
|
||||
const [sortDesc, setSortDesc] = useState(true)
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
const [form, setForm] = useState<FormState>(emptyForm)
|
||||
const isEdit = !!form.id
|
||||
|
||||
const list = useQuery({
|
||||
queryKey: ['suppliers', { page, search, sortBy, sortDesc }],
|
||||
queryFn: async () => {
|
||||
const res = await api.get<Paged<Supplier>>('/suppliers', {
|
||||
params: { page, pageSize: 20, search: search || undefined, sortBy, sortDesc },
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
})
|
||||
|
||||
const mutate = useMutation({
|
||||
mutationFn: async (data: FormState) => {
|
||||
const payload = {
|
||||
id: data.id,
|
||||
code: data.code,
|
||||
name: data.name,
|
||||
type: Number(data.type),
|
||||
taxCode: data.taxCode || null,
|
||||
phone: data.phone || null,
|
||||
email: data.email || null,
|
||||
address: data.address || null,
|
||||
contactPerson: data.contactPerson || null,
|
||||
note: data.note || null,
|
||||
}
|
||||
if (data.id) {
|
||||
await api.put(`/suppliers/${data.id}`, payload)
|
||||
} else {
|
||||
await api.post('/suppliers', payload)
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['suppliers'] })
|
||||
toast.success(isEdit ? 'Đã cập nhật NCC' : 'Đã thêm NCC')
|
||||
setOpen(false)
|
||||
setForm(emptyForm)
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
const remove = useMutation({
|
||||
mutationFn: async (id: string) => await api.delete(`/suppliers/${id}`),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['suppliers'] })
|
||||
toast.success('Đã xóa')
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
function openNew() {
|
||||
setForm(emptyForm)
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
function openEdit(s: Supplier) {
|
||||
setForm({
|
||||
id: s.id, code: s.code, name: s.name, type: s.type,
|
||||
taxCode: s.taxCode ?? '', phone: s.phone ?? '', email: s.email ?? '',
|
||||
address: s.address ?? '', contactPerson: s.contactPerson ?? '', note: s.note ?? '',
|
||||
})
|
||||
setOpen(true)
|
||||
}
|
||||
|
||||
function submit(e: FormEvent) {
|
||||
e.preventDefault()
|
||||
mutate.mutate(form)
|
||||
}
|
||||
|
||||
const columns: Column<Supplier>[] = [
|
||||
{ key: 'code', header: 'Mã', sortable: true, render: s => <span className="font-mono text-xs">{s.code}</span>, width: 'w-32' },
|
||||
{ key: 'name', header: 'Tên NCC', sortable: true, render: s => s.name },
|
||||
{ key: 'type', header: 'Loại', sortable: true, width: 'w-36', render: s => SupplierTypeLabel[s.type] },
|
||||
{ key: 'taxCode', header: 'MST', render: s => s.taxCode ?? '—' },
|
||||
{ key: 'phone', header: 'Điện thoại', render: s => s.phone ?? '—' },
|
||||
{
|
||||
key: 'actions',
|
||||
header: '',
|
||||
align: 'right',
|
||||
width: 'w-32',
|
||||
render: s => (
|
||||
<div className="flex justify-end gap-1">
|
||||
<PermissionGuard menuKey={MenuKeys.Suppliers} action="Update">
|
||||
<Button size="sm" variant="ghost" onClick={() => openEdit(s)}>
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
<PermissionGuard menuKey={MenuKeys.Suppliers} action="Delete">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
if (confirm(`Xóa NCC "${s.name}"?`)) remove.mutate(s.id)
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-red-500" />
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageHeader
|
||||
title="Nhà cung cấp"
|
||||
description="Quản lý NCC / Thầu phụ / Tổ đội / Đơn vị dịch vụ / Chủ đầu tư"
|
||||
actions={
|
||||
<PermissionGuard menuKey={MenuKeys.Suppliers} action="Create">
|
||||
<Button onClick={openNew}>
|
||||
<Plus className="h-4 w-4" />
|
||||
Thêm NCC
|
||||
</Button>
|
||||
</PermissionGuard>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="mb-3 flex gap-2">
|
||||
<Input
|
||||
placeholder="Tìm theo mã, tên, MST…"
|
||||
value={search}
|
||||
onChange={e => {
|
||||
setSearch(e.target.value)
|
||||
setPage(1)
|
||||
}}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
rows={list.data?.items ?? []}
|
||||
getRowKey={s => s.id}
|
||||
isLoading={list.isLoading}
|
||||
sortBy={sortBy}
|
||||
sortDesc={sortDesc}
|
||||
onSortChange={(key, desc) => {
|
||||
setSortBy(key)
|
||||
setSortDesc(desc)
|
||||
}}
|
||||
/>
|
||||
<Pagination page={page} pageSize={20} total={list.data?.total ?? 0} onChange={setPage} />
|
||||
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
title={isEdit ? 'Sửa NCC' : 'Thêm NCC mới'}
|
||||
size="lg"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||||
Hủy
|
||||
</Button>
|
||||
<Button onClick={submit} disabled={mutate.isPending}>
|
||||
{mutate.isPending ? 'Đang lưu…' : 'Lưu'}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form onSubmit={submit} className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1.5">
|
||||
<Label>Mã NCC *</Label>
|
||||
<Input value={form.code} onChange={e => setForm({ ...form, code: e.target.value })} required />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Loại *</Label>
|
||||
<Select value={form.type} onChange={e => setForm({ ...form, type: Number(e.target.value) as SupplierType })}>
|
||||
{Object.entries(SupplierTypeLabel).map(([v, l]) => (
|
||||
<option key={v} value={v}>
|
||||
{l}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label>Tên đầy đủ *</Label>
|
||||
<Input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} required />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>MST</Label>
|
||||
<Input value={form.taxCode} onChange={e => setForm({ ...form, taxCode: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Điện thoại</Label>
|
||||
<Input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Email</Label>
|
||||
<Input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} />
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label>Người liên hệ</Label>
|
||||
<Input value={form.contactPerson} onChange={e => setForm({ ...form, contactPerson: e.target.value })} />
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label>Địa chỉ</Label>
|
||||
<Input value={form.address} onChange={e => setForm({ ...form, address: e.target.value })} />
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1.5">
|
||||
<Label>Ghi chú</Label>
|
||||
<Textarea rows={3} value={form.note} onChange={e => setForm({ ...form, note: e.target.value })} />
|
||||
</div>
|
||||
</form>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
129
fe-admin/src/pages/system/PermissionsPage.tsx
Normal file
129
fe-admin/src/pages/system/PermissionsPage.tsx
Normal file
@ -0,0 +1,129 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { toast } from 'sonner'
|
||||
import { PageHeader } from '@/components/PageHeader'
|
||||
import { Select } from '@/components/ui/Select'
|
||||
import { api } from '@/lib/api'
|
||||
import { getErrorMessage } from '@/lib/apiError'
|
||||
import type { MenuItem, Permission, Role } from '@/types/menu'
|
||||
|
||||
type CrudKey = 'canRead' | 'canCreate' | 'canUpdate' | 'canDelete'
|
||||
const CRUD_COLS: { key: CrudKey; label: string }[] = [
|
||||
{ key: 'canRead', label: 'Xem' },
|
||||
{ key: 'canCreate', label: 'Tạo' },
|
||||
{ key: 'canUpdate', label: 'Sửa' },
|
||||
{ key: 'canDelete', label: 'Xóa' },
|
||||
]
|
||||
|
||||
export function PermissionsPage() {
|
||||
const qc = useQueryClient()
|
||||
const [roleId, setRoleId] = useState<string>('')
|
||||
|
||||
const roles = useQuery({
|
||||
queryKey: ['roles'],
|
||||
queryFn: async () => (await api.get<Role[]>('/roles')).data,
|
||||
})
|
||||
|
||||
const menus = useQuery({
|
||||
queryKey: ['menus', 'all'],
|
||||
queryFn: async () => (await api.get<MenuItem[]>('/menus')).data,
|
||||
})
|
||||
|
||||
const perms = useQuery({
|
||||
queryKey: ['permissions', roleId],
|
||||
queryFn: async () => (await api.get<Permission[]>(`/permissions/by-role/${roleId}`)).data,
|
||||
enabled: !!roleId,
|
||||
})
|
||||
|
||||
const upsert = useMutation({
|
||||
mutationFn: async (p: { menuKey: string; canRead: boolean; canCreate: boolean; canUpdate: boolean; canDelete: boolean }) => {
|
||||
await api.put('/permissions', { roleId, ...p })
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['permissions', roleId] })
|
||||
},
|
||||
onError: err => toast.error(getErrorMessage(err)),
|
||||
})
|
||||
|
||||
const permMap = useMemo(() => {
|
||||
const map = new Map<string, Permission>()
|
||||
for (const p of perms.data ?? []) map.set(p.menuKey, p)
|
||||
return map
|
||||
}, [perms.data])
|
||||
|
||||
function currentFlags(menuKey: string) {
|
||||
const p = permMap.get(menuKey)
|
||||
return {
|
||||
canRead: p?.canRead ?? false,
|
||||
canCreate: p?.canCreate ?? false,
|
||||
canUpdate: p?.canUpdate ?? false,
|
||||
canDelete: p?.canDelete ?? false,
|
||||
}
|
||||
}
|
||||
|
||||
function toggle(menuKey: string, field: CrudKey) {
|
||||
const flags = currentFlags(menuKey)
|
||||
const next = { ...flags, [field]: !flags[field] }
|
||||
upsert.mutate({ menuKey, ...next })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageHeader
|
||||
title="Ma trận phân quyền"
|
||||
description="Tick để gán quyền Xem / Tạo / Sửa / Xóa cho từng menu theo vai trò. Thay đổi lưu tự động."
|
||||
/>
|
||||
|
||||
<div className="mb-4 max-w-sm">
|
||||
<Select value={roleId} onChange={e => setRoleId(e.target.value)}>
|
||||
<option value="">-- Chọn vai trò --</option>
|
||||
{roles.data?.map(r => (
|
||||
<option key={r.id} value={r.id}>
|
||||
{r.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{roleId && (
|
||||
<div className="overflow-auto rounded-md border border-slate-200 bg-white">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-slate-50 text-slate-700">
|
||||
<tr>
|
||||
<th className="px-3 py-2 text-left font-medium">Menu</th>
|
||||
{CRUD_COLS.map(c => (
|
||||
<th key={c.key} className="px-3 py-2 text-center font-medium w-20">{c.label}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{menus.data?.map(m => {
|
||||
const flags = currentFlags(m.key)
|
||||
const depth = m.parentKey ? 1 : 0
|
||||
return (
|
||||
<tr key={m.key} className="border-t border-slate-100">
|
||||
<td className="px-3 py-2" style={{ paddingLeft: `${0.75 + depth * 1.5}rem` }}>
|
||||
<span className="font-medium text-slate-800">{m.label}</span>
|
||||
<span className="ml-2 font-mono text-xs text-slate-400">{m.key}</span>
|
||||
</td>
|
||||
{CRUD_COLS.map(c => (
|
||||
<td key={c.key} className="px-3 py-2 text-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="h-4 w-4 cursor-pointer accent-brand-600"
|
||||
checked={flags[c.key]}
|
||||
disabled={upsert.isPending}
|
||||
onChange={() => toggle(m.key, c.key)}
|
||||
/>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user