api ulandi
This commit is contained in:
Samandar Turgunboyev
74
src/pages/employees/lib/api.ts
Normal file
74
src/pages/employees/lib/api.ts
Normal file
@@ -0,0 +1,74 @@
|
||||
import type {
|
||||
GetAllEmployeesData,
|
||||
GetDetailEmployeesData,
|
||||
} from "@/pages/employees/lib/type";
|
||||
import httpClient from "@/shared/config/api/httpClient";
|
||||
import { GET_ALL_EMPLOYEES } from "@/shared/config/api/URLs";
|
||||
import type { AxiosResponse } from "axios";
|
||||
|
||||
const getAllEmployees = async ({
|
||||
page,
|
||||
page_size,
|
||||
}: {
|
||||
page: number;
|
||||
page_size: number;
|
||||
}): Promise<AxiosResponse<GetAllEmployeesData>> => {
|
||||
const response = await httpClient.get(GET_ALL_EMPLOYEES, {
|
||||
params: { page, page_size },
|
||||
});
|
||||
return response;
|
||||
};
|
||||
|
||||
const getDetailEmployees = async ({
|
||||
id,
|
||||
}: {
|
||||
id: number;
|
||||
}): Promise<AxiosResponse<GetDetailEmployeesData>> => {
|
||||
const response = await httpClient.get(`${GET_ALL_EMPLOYEES}${id}/`);
|
||||
return response;
|
||||
};
|
||||
|
||||
const deleteEmployees = async ({ id }: { id: number }) => {
|
||||
const response = await httpClient.delete(`${GET_ALL_EMPLOYEES}${id}/`);
|
||||
return response;
|
||||
};
|
||||
|
||||
const editEmployees = async ({
|
||||
id,
|
||||
body,
|
||||
}: {
|
||||
id: number;
|
||||
body: {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string | null;
|
||||
role: "buxgalter" | "operator";
|
||||
};
|
||||
}) => {
|
||||
const response = await httpClient.patch(`${GET_ALL_EMPLOYEES}${id}/`, body);
|
||||
return response;
|
||||
};
|
||||
|
||||
const createEmployees = async ({
|
||||
body,
|
||||
}: {
|
||||
body: {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string | null;
|
||||
role: "buxgalter" | "operator";
|
||||
};
|
||||
}) => {
|
||||
const response = await httpClient.post(`${GET_ALL_EMPLOYEES}`, body);
|
||||
return response;
|
||||
};
|
||||
|
||||
export {
|
||||
createEmployees,
|
||||
deleteEmployees,
|
||||
editEmployees,
|
||||
getAllEmployees,
|
||||
getDetailEmployees,
|
||||
};
|
||||
35
src/pages/employees/lib/type.ts
Normal file
35
src/pages/employees/lib/type.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
export interface GetAllEmployeesData {
|
||||
status: boolean;
|
||||
data: {
|
||||
links: {
|
||||
previous: string;
|
||||
next: string;
|
||||
};
|
||||
total_items: number;
|
||||
total_pages: number;
|
||||
page_size: number;
|
||||
current_page: number;
|
||||
results: [
|
||||
{
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string;
|
||||
role: "buxgalter" | "operator";
|
||||
},
|
||||
];
|
||||
};
|
||||
}
|
||||
|
||||
export interface GetDetailEmployeesData {
|
||||
status: boolean;
|
||||
data: {
|
||||
id: number;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string | null;
|
||||
role: "buxgalter" | "operator";
|
||||
};
|
||||
}
|
||||
349
src/pages/employees/ui/EditEmployees.tsx
Normal file
349
src/pages/employees/ui/EditEmployees.tsx
Normal file
@@ -0,0 +1,349 @@
|
||||
import {
|
||||
createEmployees,
|
||||
editEmployees,
|
||||
getDetailEmployees,
|
||||
} from "@/pages/employees/lib/api";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import onlyNumber from "@/shared/lib/onlyNumber";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from "@/shared/ui/form";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Loader, X } from "lucide-react";
|
||||
import { useEffect, type Dispatch, type SetStateAction } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import z from "zod";
|
||||
|
||||
const roles = ["buxgalter", "operator"] as const;
|
||||
|
||||
// ✅ Conditional schema - create uchun password majburiy, edit uchun yo'q
|
||||
const createEmployeeSchema = z.object({
|
||||
firstname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
lastname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
phone: z.string().min(9, "Telefon raqam noto'g'ri"),
|
||||
role: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
password: z
|
||||
.string()
|
||||
.min(6, "Parol kamida 6 ta belgidan iborat bo'lishi kerak"),
|
||||
});
|
||||
|
||||
const editEmployeeSchema = z.object({
|
||||
firstname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
lastname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
phone: z.string().min(9, "Telefon raqam noto'g'ri"),
|
||||
role: z.string().min(1, { message: "Majburiy maydon" }),
|
||||
});
|
||||
|
||||
type CreateEmployeeFormValues = z.infer<typeof createEmployeeSchema>;
|
||||
type EditEmployeeFormValues = z.infer<typeof editEmployeeSchema>;
|
||||
type EmployeeFormValues = CreateEmployeeFormValues | EditEmployeeFormValues;
|
||||
|
||||
const EditEmployees = ({
|
||||
modalMode,
|
||||
editId,
|
||||
showModal,
|
||||
setEditId,
|
||||
setShowModal,
|
||||
}: {
|
||||
modalMode: "add" | "edit";
|
||||
showModal: boolean;
|
||||
setEditId: Dispatch<SetStateAction<number | null>>;
|
||||
editId: number | null;
|
||||
setShowModal: Dispatch<SetStateAction<boolean>>;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// ✅ Dinamik schema - modalMode'ga qarab
|
||||
const form = useForm<EmployeeFormValues>({
|
||||
resolver: zodResolver(
|
||||
modalMode === "add" ? createEmployeeSchema : editEmployeeSchema,
|
||||
),
|
||||
defaultValues: {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
phone: "+998",
|
||||
role: "",
|
||||
...(modalMode === "add" && { password: "" }),
|
||||
},
|
||||
});
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ["detail_employees", editId],
|
||||
queryFn: () => getDetailEmployees({ id: editId! }),
|
||||
select(data) {
|
||||
return data.data.data;
|
||||
},
|
||||
enabled: !!editId,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (data && editId) {
|
||||
form.reset({
|
||||
firstname: data.first_name,
|
||||
lastname: data.last_name,
|
||||
phone: data.phone,
|
||||
role: data.role,
|
||||
});
|
||||
} else if (!editId && showModal) {
|
||||
form.reset({
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
phone: "+998",
|
||||
role: "",
|
||||
...(modalMode === "add" && { password: "" }),
|
||||
});
|
||||
}
|
||||
}, [data, editId, showModal, modalMode]);
|
||||
|
||||
const { mutate: create, isPending } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
}: {
|
||||
body: {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string | null;
|
||||
role: "buxgalter" | "operator";
|
||||
password: string;
|
||||
};
|
||||
}) => createEmployees({ body }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["detail_employees"] });
|
||||
queryClient.refetchQueries({ queryKey: ["employees"] });
|
||||
setShowModal(false);
|
||||
setEditId(null);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: edit, isPending: editPengding } = useMutation({
|
||||
mutationFn: ({
|
||||
body,
|
||||
id,
|
||||
}: {
|
||||
id: number;
|
||||
body: {
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
phone: string;
|
||||
email: string | null;
|
||||
role: "buxgalter" | "operator";
|
||||
};
|
||||
}) => editEmployees({ id, body }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["detail_employees"] });
|
||||
queryClient.refetchQueries({ queryKey: ["employees"] });
|
||||
setShowModal(false);
|
||||
setEditId(null);
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(values: EmployeeFormValues) {
|
||||
if (modalMode === "add" && editId === null) {
|
||||
create({
|
||||
body: {
|
||||
email: null,
|
||||
first_name: values.firstname,
|
||||
last_name: values.lastname,
|
||||
phone: onlyNumber(values.phone),
|
||||
role: values.role as "buxgalter" | "operator",
|
||||
password: (values as CreateEmployeeFormValues).password,
|
||||
},
|
||||
});
|
||||
} else if (modalMode === "edit" && editId !== null) {
|
||||
edit({
|
||||
id: editId,
|
||||
body: {
|
||||
email: null,
|
||||
first_name: values.firstname,
|
||||
last_name: values.lastname,
|
||||
phone: onlyNumber(values.phone),
|
||||
role: values.role as "buxgalter" | "operator",
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-gray-800 rounded-2xl p-8 max-w-md w-full border border-gray-700 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
{modalMode === "add"
|
||||
? t("Xodim qo'shish")
|
||||
: t("Xodimni tahrirlash")}
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
setEditId(null);
|
||||
form.reset();
|
||||
}}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="firstname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Ismi")}</Label>
|
||||
<FormControl>
|
||||
<Input placeholder="Ismi" {...field} className="h-12" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lastname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Familiyasi")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Familiyasi"
|
||||
{...field}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Telefon raqami")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="+998 90 123 45 67"
|
||||
{...field}
|
||||
value={formatPhone(field.value)}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* ✅ Password field - faqat "add" modeda ko'rinadi */}
|
||||
{modalMode === "add" && (
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Parol")}</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="••••••"
|
||||
{...field}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>{t("Role")}</Label>
|
||||
<Select
|
||||
key={field.value}
|
||||
value={field.value}
|
||||
onValueChange={(val) => field.onChange(val)}
|
||||
>
|
||||
<SelectTrigger className="w-full !h-12 cursor-pointer">
|
||||
<SelectValue placeholder={t("Role tanlang")} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{roles.map((r) => (
|
||||
<SelectItem key={r} value={r}>
|
||||
{t(r)}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 cursor-pointer bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-all shadow-lg"
|
||||
>
|
||||
{isPending || editPengding ? (
|
||||
<Loader className="animate-spin" />
|
||||
) : modalMode === "add" ? (
|
||||
t("Qo'shish")
|
||||
) : (
|
||||
t("Saqlash")
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEditId(null);
|
||||
setShowModal(false);
|
||||
form.reset();
|
||||
}}
|
||||
className="flex-1 bg-gray-700 cursor-pointer hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold transition-all"
|
||||
>
|
||||
{t("Bekor qilish")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditEmployees;
|
||||
@@ -1,134 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { deleteEmployees, getAllEmployees } from "@/pages/employees/lib/api";
|
||||
import EditEmployees from "@/pages/employees/ui/EditEmployees";
|
||||
import formatPhone from "@/shared/lib/formatPhone";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormMessage,
|
||||
} from "@/shared/ui/form";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Edit, Phone, Plus, Trash2, X } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import z from "zod";
|
||||
|
||||
const roles = ["Operator", "Bugalter", "Manager"] as const;
|
||||
|
||||
type Employee = {
|
||||
id: number;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
phone: string;
|
||||
role: "Operator" | "Bugalter" | "Manager";
|
||||
};
|
||||
|
||||
const initialEmployees: Employee[] = [
|
||||
{
|
||||
id: 1,
|
||||
firstname: "Alisher",
|
||||
lastname: "Karimov",
|
||||
phone: "+998901234567",
|
||||
role: "Operator",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
firstname: "Nigora",
|
||||
lastname: "Rahimova",
|
||||
phone: "+998912345678",
|
||||
role: "Bugalter",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
firstname: "Nigora",
|
||||
lastname: "Rahimova",
|
||||
phone: "+998912345678",
|
||||
role: "Manager",
|
||||
},
|
||||
];
|
||||
|
||||
const employeeSchema = z.object({
|
||||
firstname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
lastname: z.string().min(2, "Kamida 2 ta belgidan iborat bo'lishi kerak"),
|
||||
phone: z.string().min(9, "Telefon raqam noto'g'ri"),
|
||||
role: z.enum(roles),
|
||||
});
|
||||
|
||||
type EmployeeFormValues = z.infer<typeof employeeSchema>;
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Edit,
|
||||
Loader2,
|
||||
Phone,
|
||||
Plus,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const EmployeesManagement = () => {
|
||||
const form = useForm<EmployeeFormValues>({
|
||||
resolver: zodResolver(employeeSchema),
|
||||
defaultValues: {
|
||||
firstname: "",
|
||||
lastname: "",
|
||||
phone: "+998",
|
||||
role: "Bugalter",
|
||||
const { t } = useTranslation();
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["employees", currentPage],
|
||||
queryFn: () => getAllEmployees({ page: currentPage, page_size: 10 }),
|
||||
select: (data) => data.data.data,
|
||||
});
|
||||
|
||||
const { mutate: deleteMutate, isPending: isDeleting } = useMutation({
|
||||
mutationFn: ({ id }: { id: number }) => {
|
||||
return deleteEmployees({ id });
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["employees"] });
|
||||
setIsDialogOpen(false);
|
||||
toast.success(t("Xodim o'chirildi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast.error(t("Xatolik yuz berdi"), {
|
||||
position: "top-center",
|
||||
richColors: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
const [employees, setEmployees] = useState<Employee[]>(initialEmployees);
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalMode, setModalMode] = useState("add");
|
||||
const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedEmployee) {
|
||||
form.setValue("firstname", selectedEmployee.firstname);
|
||||
form.setValue("lastname", selectedEmployee.lastname);
|
||||
form.setValue("phone", selectedEmployee.phone);
|
||||
form.setValue("role", selectedEmployee.role);
|
||||
}
|
||||
}, [selectedEmployee, form]);
|
||||
|
||||
const itemsPerPage = 6;
|
||||
const totalPages = Math.ceil(employees.length / itemsPerPage);
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const currentEmployees = employees.slice(
|
||||
startIndex,
|
||||
startIndex + itemsPerPage,
|
||||
);
|
||||
const [editId, setEditId] = useState<number | null>(null);
|
||||
const [modalMode, setModalMode] = useState<"add" | "edit">("add");
|
||||
|
||||
const handleAdd = () => {
|
||||
setModalMode("add");
|
||||
setShowModal(true);
|
||||
setEditId(null);
|
||||
};
|
||||
|
||||
const handleEdit = (employee: Employee) => {
|
||||
setSelectedEmployee(employee);
|
||||
const handleEdit = (id: number) => {
|
||||
setShowModal(true);
|
||||
setModalMode("edit");
|
||||
};
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
if (window.confirm("Ushbu xodimni o'chirishni xohlaysizmi?")) {
|
||||
setEmployees(employees.filter((emp) => emp.id !== id));
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (values: EmployeeFormValues) => {
|
||||
if (modalMode === "add") {
|
||||
const newEmp: Employee = { ...values, id: Date.now() };
|
||||
setEmployees([...employees, newEmp]);
|
||||
} else if (selectedEmployee) {
|
||||
setEmployees(
|
||||
employees.map((emp) =>
|
||||
emp.id === selectedEmployee.id ? { ...emp, ...values } : emp,
|
||||
),
|
||||
);
|
||||
}
|
||||
setShowModal(false);
|
||||
setEditId(id);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -137,10 +81,10 @@ const EmployeesManagement = () => {
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
|
||||
Xodimlar
|
||||
{t("Xodimlar")}
|
||||
</h1>
|
||||
<p className="text-gray-400 mt-2">
|
||||
Jami {employees.length} ta xodim
|
||||
{t("Jami")} {data?.total_items || 0} {t("ta xodim")}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
@@ -148,210 +92,175 @@ const EmployeesManagement = () => {
|
||||
className="flex cursor-pointer items-center gap-2 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-all shadow-lg hover:shadow-xl transform hover:scale-105"
|
||||
>
|
||||
<Plus size={20} />
|
||||
Xodim qo'shish
|
||||
<p className="max-lg:hidden">{t("Xodim qo'shish")}</p>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
{currentEmployees.map((employee) => (
|
||||
<div
|
||||
key={employee.id}
|
||||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-blue-500/50 transition-all shadow-lg hover:shadow-2xl transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">
|
||||
{employee.firstname} {employee.lastname}
|
||||
</h3>
|
||||
<p className="text-blue-400 text-sm">{employee.role}</p>
|
||||
{/* ✅ Loading State */}
|
||||
{isLoading ? (
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<Loader2 className="w-12 h-12 animate-spin text-blue-500 mb-4" />
|
||||
<p className="text-gray-400 text-lg">{t("Yuklanmoqda")}...</p>
|
||||
</div>
|
||||
) : data?.results && data.results.length > 0 ? (
|
||||
// ✅ Data mavjud bo'lsa
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
{data.results.map((employee) => (
|
||||
<div
|
||||
key={employee.id}
|
||||
className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-blue-500/50 transition-all shadow-lg hover:shadow-2xl transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold text-white">
|
||||
{employee.first_name} {employee.last_name}
|
||||
</h3>
|
||||
<p className="text-blue-400 text-sm">
|
||||
{t(employee.role)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<Phone size={16} className="text-gray-500" />
|
||||
<span className="text-sm">
|
||||
{formatPhone(employee.phone)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 pt-4 border-t border-gray-700">
|
||||
<button
|
||||
onClick={() => handleEdit(employee.id)}
|
||||
className="flex-1 cursor-pointer flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all font-medium"
|
||||
>
|
||||
<Edit size={16} />
|
||||
{t("Tahrirlash")}
|
||||
</button>
|
||||
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<button className="flex-1 cursor-pointer flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-all font-medium">
|
||||
<Trash2 size={16} />
|
||||
{t("O'chirish")}
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent className="bg-gray-800 text-gray-100 border border-gray-700">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{t("Foydalanuvchini o'chirish")}
|
||||
</DialogTitle>
|
||||
<DialogDescription className="text-gray-400">
|
||||
{t("Siz")}{" "}
|
||||
<b>
|
||||
{employee.first_name} {employee.last_name}
|
||||
</b>{" "}
|
||||
{t("foydalanuvchini o'chirmoqchimisiz?")}
|
||||
<br />
|
||||
{t("Ushbu amalni qaytarib bo'lmaydi")}.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
className="bg-gray-700 hover:bg-gray-600 text-white"
|
||||
onClick={() => setIsDialogOpen(false)}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{t("Bekor qilish")}
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-red-600 hover:bg-red-700 text-white"
|
||||
onClick={() => deleteMutate({ id: employee.id })}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 animate-spin mr-2" />
|
||||
</>
|
||||
) : (
|
||||
t("O'chirish")
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 mb-4">
|
||||
<div className="flex items-center gap-2 text-gray-300">
|
||||
<Phone size={16} className="text-gray-500" />
|
||||
<span className="text-sm">{formatPhone(employee.phone)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 pt-4 border-t border-gray-700">
|
||||
<button
|
||||
onClick={() => handleEdit(employee)}
|
||||
className="flex-1 cursor-pointer flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-all font-medium"
|
||||
>
|
||||
<Edit size={16} />
|
||||
Tahrirlash
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(employee.id)}
|
||||
className="flex-1 cursor-pointer flex items-center justify-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg transition-all font-medium"
|
||||
>
|
||||
<Trash2 size={16} />
|
||||
O'chirish
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-end items-center gap-2">
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-4 py-2 bg-gray-800 hover:bg-gray-700 disabled:bg-gray-800/50 disabled:cursor-not-allowed text-white rounded-lg transition-all border border-gray-700"
|
||||
>
|
||||
Oldingi
|
||||
</button>
|
||||
|
||||
{[...Array(totalPages)].map((_, i) => (
|
||||
{/* Pagination */}
|
||||
<div className="flex justify-end gap-2">
|
||||
<button
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
|
||||
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
|
||||
>
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
|
||||
{[...Array(data?.total_pages || 0)].map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
className={`px-4 py-2 rounded-lg border transition-all font-medium ${
|
||||
currentPage === i + 1
|
||||
? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
|
||||
: "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
|
||||
}`}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
disabled={currentPage === data?.total_pages}
|
||||
onClick={() =>
|
||||
setCurrentPage((p) =>
|
||||
Math.min(p + 1, data ? data?.total_pages : 0),
|
||||
)
|
||||
}
|
||||
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:border-slate-500"
|
||||
>
|
||||
<ChevronRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
// ✅ Ma'lumot yo'q bo'lsa
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<div className="bg-gray-800/50 rounded-full p-8 mb-4">
|
||||
<Phone className="w-16 h-16 text-gray-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-300 mb-2">
|
||||
{t("Xodimlar topilmadi")}
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
{t("Birinchi xodimni qo'shing")}
|
||||
</p>
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
className={`px-4 py-2 rounded-lg transition-all border ${
|
||||
currentPage === i + 1
|
||||
? "bg-gradient-to-r from-blue-500 to-purple-600 text-white border-transparent"
|
||||
: "bg-gray-800 hover:bg-gray-700 text-white border-gray-700"
|
||||
}`}
|
||||
onClick={handleAdd}
|
||||
className="flex items-center gap-2 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-all shadow-lg"
|
||||
>
|
||||
{i + 1}
|
||||
<Plus size={20} />
|
||||
{t("Xodim qo'shish")}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-4 py-2 bg-gray-800 hover:bg-gray-700 disabled:bg-gray-800/50 disabled:cursor-not-allowed text-white rounded-lg transition-all border border-gray-700"
|
||||
>
|
||||
Keyingi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showModal && (
|
||||
<div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-gray-800 rounded-2xl p-8 max-w-md w-full border border-gray-700 shadow-2xl">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-white">
|
||||
{modalMode === "add" ? "Xodim qo'shish" : "Xodimni tahrirlash"}
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
className="text-gray-400 hover:text-white transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="firstname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>First Name</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="First Name"
|
||||
{...field}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="lastname"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Last Name</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Last Name"
|
||||
{...field}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="phone"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Phone</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="+998 90 123 45 67"
|
||||
{...field}
|
||||
value={formatPhone(field.value)}
|
||||
className="h-12"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem className="w-full">
|
||||
<Label>Role</Label>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={(val) => field.onChange(val)}
|
||||
>
|
||||
<SelectTrigger className="w-full !h-12 cursor-pointer">
|
||||
<SelectValue placeholder="Select role" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="cursor-pointer">
|
||||
{roles.map((r) => (
|
||||
<SelectItem
|
||||
key={r}
|
||||
value={r}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
{r}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 cursor-pointer bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-6 py-3 rounded-lg font-semibold transition-all shadow-lg"
|
||||
>
|
||||
{modalMode === "add" ? "Qo'shish" : "Saqlash"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowModal(false);
|
||||
form.reset();
|
||||
}}
|
||||
className="flex-1 bg-gray-700 cursor-pointer hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold transition-all"
|
||||
>
|
||||
Bekor qilish
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<EditEmployees
|
||||
key={editId || "new"}
|
||||
modalMode={modalMode}
|
||||
showModal={showModal}
|
||||
setShowModal={setShowModal}
|
||||
editId={editId}
|
||||
setEditId={setEditId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user