permissions: implement complete permissions management
- Add permissions CRUD operations (list, create, edit, delete) - Implement proper API request/response handling - Create hooks and request functions following established pattern - Add TypeScript interfaces and form validation - Include proper error handling and user feedback
This commit is contained in:
parent
3f4aefb112
commit
30969723fa
|
|
@ -0,0 +1,103 @@
|
||||||
|
import { QUERY_KEYS } from "@/utils/query-key";
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import {
|
||||||
|
getPermissions,
|
||||||
|
getPermission,
|
||||||
|
createPermission,
|
||||||
|
updatePermission,
|
||||||
|
deletePermission,
|
||||||
|
} from "./_requests";
|
||||||
|
import {
|
||||||
|
CreatePermissionRequest,
|
||||||
|
UpdatePermissionRequest,
|
||||||
|
PermissionFilters,
|
||||||
|
} from "./_models";
|
||||||
|
import toast from "react-hot-toast";
|
||||||
|
|
||||||
|
export const usePermissions = (filters?: PermissionFilters) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PERMISSIONS, filters],
|
||||||
|
queryFn: () => getPermissions(filters),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const usePermission = (id: string, enabled: boolean = true) => {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PERMISSION, id],
|
||||||
|
queryFn: () => getPermission(id),
|
||||||
|
enabled: enabled && !!id,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useCreatePermission = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [QUERY_KEYS.CREATE_PERMISSION],
|
||||||
|
mutationFn: (permissionData: CreatePermissionRequest) =>
|
||||||
|
createPermission(permissionData),
|
||||||
|
onSuccess: (data) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_PERMISSIONS] });
|
||||||
|
// Also invalidate roles permissions as they might be affected
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_ROLE_PERMISSIONS],
|
||||||
|
});
|
||||||
|
toast.success("دسترسی با موفقیت ایجاد شد");
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
console.error("Create permission error:", error);
|
||||||
|
toast.error(error?.message || "خطا در ایجاد دسترسی");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useUpdatePermission = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [QUERY_KEYS.UPDATE_PERMISSION],
|
||||||
|
mutationFn: ({
|
||||||
|
id,
|
||||||
|
permissionData,
|
||||||
|
}: {
|
||||||
|
id: string;
|
||||||
|
permissionData: UpdatePermissionRequest;
|
||||||
|
}) => updatePermission(id, permissionData),
|
||||||
|
onSuccess: (data, variables) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_PERMISSIONS] });
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_PERMISSION, variables.id],
|
||||||
|
});
|
||||||
|
// Also invalidate roles permissions as they might be affected
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_ROLE_PERMISSIONS],
|
||||||
|
});
|
||||||
|
toast.success("دسترسی با موفقیت بهروزرسانی شد");
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
console.error("Update permission error:", error);
|
||||||
|
toast.error(error?.message || "خطا در بهروزرسانی دسترسی");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useDeletePermission = () => {
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
return useMutation({
|
||||||
|
mutationKey: [QUERY_KEYS.DELETE_PERMISSION],
|
||||||
|
mutationFn: (id: string) => deletePermission(id),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.GET_PERMISSIONS] });
|
||||||
|
// Also invalidate roles permissions as they might be affected
|
||||||
|
queryClient.invalidateQueries({
|
||||||
|
queryKey: [QUERY_KEYS.GET_ROLE_PERMISSIONS],
|
||||||
|
});
|
||||||
|
toast.success("دسترسی با موفقیت حذف شد");
|
||||||
|
},
|
||||||
|
onError: (error: any) => {
|
||||||
|
console.error("Delete permission error:", error);
|
||||||
|
toast.error(error?.message || "خطا در حذف دسترسی");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import { Permission } from "@/types/auth";
|
||||||
|
|
||||||
|
export interface PermissionFormData {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PermissionFilters {
|
||||||
|
search?: string;
|
||||||
|
page?: number;
|
||||||
|
limit?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreatePermissionRequest {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdatePermissionRequest {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PermissionsResponse {
|
||||||
|
permissions: Permission[] | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PermissionResponse {
|
||||||
|
permission: Permission;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CreatePermissionResponse {
|
||||||
|
permission: Permission;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UpdatePermissionResponse {
|
||||||
|
permission: Permission;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DeletePermissionResponse {
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Export Permission type for easier access
|
||||||
|
export type { Permission } from "@/types/auth";
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
import {
|
||||||
|
httpGetRequest,
|
||||||
|
httpPostRequest,
|
||||||
|
httpPutRequest,
|
||||||
|
httpDeleteRequest,
|
||||||
|
APIUrlGenerator,
|
||||||
|
} from "@/utils/baseHttpService";
|
||||||
|
import { API_ROUTES } from "@/constant/routes";
|
||||||
|
import {
|
||||||
|
Permission,
|
||||||
|
CreatePermissionRequest,
|
||||||
|
UpdatePermissionRequest,
|
||||||
|
PermissionsResponse,
|
||||||
|
PermissionResponse,
|
||||||
|
CreatePermissionResponse,
|
||||||
|
UpdatePermissionResponse,
|
||||||
|
DeletePermissionResponse,
|
||||||
|
PermissionFilters,
|
||||||
|
} from "./_models";
|
||||||
|
|
||||||
|
export const getPermissions = async (filters?: PermissionFilters) => {
|
||||||
|
try {
|
||||||
|
const queryParams: Record<string, string | number | null> = {};
|
||||||
|
|
||||||
|
if (filters?.search) queryParams.search = filters.search;
|
||||||
|
if (filters?.page) queryParams.page = filters.page;
|
||||||
|
if (filters?.limit) queryParams.limit = filters.limit;
|
||||||
|
|
||||||
|
const response = await httpGetRequest<PermissionsResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.GET_PERMISSIONS, queryParams)
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log("Permissions API Response:", response);
|
||||||
|
console.log("Permissions data:", response.data);
|
||||||
|
|
||||||
|
// Handle API response structure: {data: {permissions: Permission[] | null}}
|
||||||
|
if (
|
||||||
|
response.data &&
|
||||||
|
response.data.permissions &&
|
||||||
|
Array.isArray(response.data.permissions)
|
||||||
|
) {
|
||||||
|
return response.data.permissions;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If permissions is null or not an array, return empty array
|
||||||
|
console.warn("Permissions is null or not an array:", response.data);
|
||||||
|
return [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching permissions:", error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getPermission = async (id: string) => {
|
||||||
|
try {
|
||||||
|
const response = await httpGetRequest<PermissionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.GET_PERMISSION(id))
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle API response structure
|
||||||
|
if (response.data && response.data.permission) {
|
||||||
|
return response.data.permission;
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error("Permission not found");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching permission:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createPermission = async (
|
||||||
|
permissionData: CreatePermissionRequest
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const response = await httpPostRequest<CreatePermissionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.CREATE_PERMISSION),
|
||||||
|
permissionData
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.data && response.data.permission) {
|
||||||
|
return response.data.permission;
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error("Failed to create permission");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error creating permission:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const updatePermission = async (
|
||||||
|
id: string,
|
||||||
|
permissionData: UpdatePermissionRequest
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const response = await httpPutRequest<UpdatePermissionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.UPDATE_PERMISSION(id)),
|
||||||
|
permissionData
|
||||||
|
);
|
||||||
|
|
||||||
|
if (response.data && response.data.permission) {
|
||||||
|
return response.data.permission;
|
||||||
|
}
|
||||||
|
|
||||||
|
throw new Error("Failed to update permission");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error updating permission:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deletePermission = async (id: string) => {
|
||||||
|
try {
|
||||||
|
const response = await httpDeleteRequest<DeletePermissionResponse>(
|
||||||
|
APIUrlGenerator(API_ROUTES.DELETE_PERMISSION(id))
|
||||||
|
);
|
||||||
|
|
||||||
|
return response.data;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error deleting permission:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,159 @@
|
||||||
|
import React, { useEffect } from 'react';
|
||||||
|
import { useNavigate, useParams } from 'react-router-dom';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
import * as yup from 'yup';
|
||||||
|
import { usePermission, useCreatePermission, useUpdatePermission } from '../core/_hooks';
|
||||||
|
import { PermissionFormData } from '../core/_models';
|
||||||
|
import { Button } from "@/components/ui/Button";
|
||||||
|
import { Input } from "@/components/ui/Input";
|
||||||
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||||
|
import { ArrowRight } from "lucide-react";
|
||||||
|
|
||||||
|
const permissionSchema = yup.object({
|
||||||
|
title: yup.string().required('عنوان الزامی است').min(3, 'عنوان باید حداقل 3 کاراکتر باشد'),
|
||||||
|
description: yup.string().required('توضیحات الزامی است').min(10, 'توضیحات باید حداقل 10 کاراکتر باشد'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const PermissionFormPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const isEdit = !!id;
|
||||||
|
|
||||||
|
const { data: permission, isLoading: isLoadingPermission } = usePermission(id || '', isEdit);
|
||||||
|
const { mutate: createPermission, isPending: isCreating } = useCreatePermission();
|
||||||
|
const { mutate: updatePermission, isPending: isUpdating } = useUpdatePermission();
|
||||||
|
|
||||||
|
const isLoading = isCreating || isUpdating;
|
||||||
|
|
||||||
|
const {
|
||||||
|
register,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors, isValid },
|
||||||
|
setValue
|
||||||
|
} = useForm<PermissionFormData>({
|
||||||
|
resolver: yupResolver(permissionSchema),
|
||||||
|
mode: 'onChange',
|
||||||
|
defaultValues: {
|
||||||
|
title: '',
|
||||||
|
description: ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Populate form when editing
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit && permission) {
|
||||||
|
setValue('title', permission.title);
|
||||||
|
setValue('description', permission.description);
|
||||||
|
}
|
||||||
|
}, [isEdit, permission, setValue]);
|
||||||
|
|
||||||
|
const onSubmit = (data: PermissionFormData) => {
|
||||||
|
if (isEdit && id) {
|
||||||
|
updatePermission({
|
||||||
|
id,
|
||||||
|
permissionData: {
|
||||||
|
id: parseInt(id),
|
||||||
|
title: data.title,
|
||||||
|
description: data.description
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
navigate('/permissions');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
createPermission({
|
||||||
|
title: data.title,
|
||||||
|
description: data.description
|
||||||
|
}, {
|
||||||
|
onSuccess: () => {
|
||||||
|
navigate('/permissions');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
navigate('/permissions');
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isEdit && isLoadingPermission) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-64">
|
||||||
|
<LoadingSpinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleBack}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<ArrowRight className="h-4 w-4" />
|
||||||
|
بازگشت
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{isEdit ? 'ویرایش دسترسی' : 'ایجاد دسترسی جدید'}
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
{isEdit ? 'ویرایش اطلاعات دسترسی' : 'اطلاعات دسترسی جدید را وارد کنید'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Form */}
|
||||||
|
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg p-6">
|
||||||
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
|
||||||
|
<Input
|
||||||
|
label="عنوان دسترسی"
|
||||||
|
{...register('title')}
|
||||||
|
error={errors.title?.message}
|
||||||
|
placeholder="مثال: CREATE_USER, DELETE_POST, MANAGE_ADMIN"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
توضیحات
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
{...register('description')}
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
|
||||||
|
placeholder="توضیح کاملی از این دسترسی ارائه دهید..."
|
||||||
|
/>
|
||||||
|
{errors.description && (
|
||||||
|
<p className="text-red-500 text-sm mt-1">{errors.description.message}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-4 space-x-reverse pt-6 border-t border-gray-200 dark:border-gray-600">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleBack}
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
انصراف
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
loading={isLoading}
|
||||||
|
disabled={!isValid}
|
||||||
|
>
|
||||||
|
{isEdit ? 'بهروزرسانی' : 'ایجاد'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PermissionFormPage;
|
||||||
|
|
@ -0,0 +1,237 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { usePermissions, useDeletePermission } from '../core/_hooks';
|
||||||
|
import { Permission } from '../core/_models';
|
||||||
|
import { Button } from "@/components/ui/Button";
|
||||||
|
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||||
|
import { Trash2, Edit3, Plus, Eye, Shield } from "lucide-react";
|
||||||
|
import { Modal } from "@/components/ui/Modal";
|
||||||
|
|
||||||
|
const PermissionsListPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [deletePermissionId, setDeletePermissionId] = useState<string | null>(null);
|
||||||
|
const [filters, setFilters] = useState({
|
||||||
|
search: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: permissions, isLoading, error } = usePermissions(filters);
|
||||||
|
const { mutate: deletePermission, isPending: isDeleting } = useDeletePermission();
|
||||||
|
|
||||||
|
const handleCreate = () => {
|
||||||
|
navigate('/permissions/create');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleView = (permissionId: number) => {
|
||||||
|
navigate(`/permissions/${permissionId}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (permissionId: number) => {
|
||||||
|
navigate(`/permissions/${permissionId}/edit`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteConfirm = () => {
|
||||||
|
if (deletePermissionId) {
|
||||||
|
deletePermission(deletePermissionId, {
|
||||||
|
onSuccess: () => {
|
||||||
|
setDeletePermissionId(null);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setFilters(prev => ({ ...prev, search: e.target.value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center h-64">
|
||||||
|
<LoadingSpinner />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<p className="text-red-600 dark:text-red-400">خطا در بارگذاری دسترسیها</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
مدیریت دسترسیها
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||||
|
مدیریت دسترسیهای سیستم
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={handleCreate}
|
||||||
|
className="flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
دسترسی جدید
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
جستجو
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={filters.search}
|
||||||
|
onChange={handleSearchChange}
|
||||||
|
placeholder="عنوان یا توضیحات دسترسی..."
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Permissions Table */}
|
||||||
|
<div className="bg-white dark:bg-gray-800 shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
|
||||||
|
{(permissions || []).length === 0 ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Shield className="h-12 w-12 text-gray-400 dark:text-gray-500 mx-auto mb-4" />
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">
|
||||||
|
هیچ دسترسی یافت نشد
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-4">
|
||||||
|
شما هنوز هیچ دسترسی ایجاد نکردهاید
|
||||||
|
</p>
|
||||||
|
<Button onClick={handleCreate}>
|
||||||
|
<Plus className="h-4 w-4 ml-2" />
|
||||||
|
اولین دسترسی را ایجاد کنید
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full">
|
||||||
|
<thead className="bg-gray-50 dark:bg-gray-700">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
عنوان
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
توضیحات
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
تاریخ ایجاد
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
تاریخ بهروزرسانی
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
|
||||||
|
عملیات
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
{(permissions || []).map((permission: Permission) => (
|
||||||
|
<tr key={permission.id} className="hover:bg-gray-50 dark:hover:bg-gray-700">
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="h-10 w-10 rounded-full bg-primary-100 dark:bg-primary-800 flex items-center justify-center">
|
||||||
|
<Shield className="h-5 w-5 text-primary-600 dark:text-primary-300" />
|
||||||
|
</div>
|
||||||
|
<div className="mr-4">
|
||||||
|
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||||
|
{permission.title}
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
ID: {permission.id}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-300 max-w-xs truncate">
|
||||||
|
{permission.description}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{new Date(permission.created_at).toLocaleDateString('fa-IR')}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{new Date(permission.updated_at).toLocaleDateString('fa-IR')}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleView(permission.id)}
|
||||||
|
className="ml-2"
|
||||||
|
>
|
||||||
|
<Eye className="h-4 w-4 ml-1" />
|
||||||
|
مشاهده
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="primary"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleEdit(permission.id)}
|
||||||
|
className="ml-2"
|
||||||
|
>
|
||||||
|
<Edit3 className="h-4 w-4 ml-1" />
|
||||||
|
ویرایش
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setDeletePermissionId(permission.id.toString())}
|
||||||
|
className="ml-2"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 ml-1" />
|
||||||
|
حذف
|
||||||
|
</Button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Delete Confirmation Modal */}
|
||||||
|
<Modal
|
||||||
|
isOpen={!!deletePermissionId}
|
||||||
|
onClose={() => setDeletePermissionId(null)}
|
||||||
|
title="حذف دسترسی"
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
آیا از حذف این دسترسی اطمینان دارید؟ این عمل قابل بازگشت نیست و ممکن است بر نقشهایی که از این دسترسی استفاده میکنند تأثیر بگذارد.
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-end space-x-2 space-x-reverse">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => setDeletePermissionId(null)}
|
||||||
|
disabled={isDeleting}
|
||||||
|
>
|
||||||
|
انصراف
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
onClick={handleDeleteConfirm}
|
||||||
|
loading={isDeleting}
|
||||||
|
>
|
||||||
|
حذف
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PermissionsListPage;
|
||||||
Loading…
Reference in New Issue