561 lines
18 KiB
TypeScript
561 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { factory_api } from "@/features/pharm/lib/api";
|
|
import { pill_api } from "@/features/pill/lib/api";
|
|
import { order_api } from "@/features/specifications/lib/api";
|
|
import {
|
|
type OrderCreateReq,
|
|
type OrderListDataRes,
|
|
type OrderUpdateReq,
|
|
} from "@/features/specifications/lib/data";
|
|
import {
|
|
SpecificationsForm,
|
|
type SpecificationsFormType,
|
|
} from "@/features/specifications/lib/form";
|
|
import { user_api } from "@/features/users/lib/api";
|
|
import formatPrice from "@/shared/lib/formatPrice";
|
|
import { cn } from "@/shared/lib/utils";
|
|
import { Button } from "@/shared/ui/button";
|
|
import {
|
|
Command,
|
|
CommandEmpty,
|
|
CommandGroup,
|
|
CommandInput,
|
|
CommandItem,
|
|
CommandList,
|
|
} from "@/shared/ui/command";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormMessage,
|
|
} from "@/shared/ui/form";
|
|
import { Input } from "@/shared/ui/input";
|
|
import { Label } from "@/shared/ui/label";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import type { AxiosError } from "axios";
|
|
import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import { useForm } from "react-hook-form";
|
|
import { toast } from "sonner";
|
|
|
|
interface Props {
|
|
initialValues: OrderListDataRes | null;
|
|
setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
export const AddedSpecification = ({ initialValues, setDialogOpen }: Props) => {
|
|
const queryClient = useQueryClient();
|
|
const { data: pill } = useQuery({
|
|
queryKey: ["pill_list", initialValues],
|
|
queryFn: () =>
|
|
pill_api.list({
|
|
limit: 999,
|
|
}),
|
|
select(data) {
|
|
return data.data.data;
|
|
},
|
|
});
|
|
|
|
const [userSearch, setUserSearch] = useState<string>("");
|
|
const [openUser, setOpenUser] = useState<boolean>(false);
|
|
|
|
const { data: user, isLoading: isUserLoading } = useQuery({
|
|
queryKey: ["user_list", userSearch, initialValues],
|
|
queryFn: () => user_api.list({ search: userSearch }),
|
|
select(data) {
|
|
return data.data.data.results;
|
|
},
|
|
});
|
|
|
|
const [factorySearch, setFactorySearch] = useState<string>("");
|
|
const [openFactory, setOpenFactory] = useState<boolean>(false);
|
|
|
|
const { data: pharm, isLoading: isPharmLoading } = useQuery({
|
|
queryKey: ["factory_list", userSearch, initialValues],
|
|
queryFn: () => factory_api.list({ name: factorySearch }),
|
|
select(data) {
|
|
return data.data.data.results;
|
|
},
|
|
});
|
|
|
|
const { mutate: create, isPending: createPending } = useMutation({
|
|
mutationFn: (body: OrderCreateReq) => order_api.create(body),
|
|
onSuccess: () => {
|
|
setDialogOpen(false);
|
|
queryClient.resetQueries({ queryKey: ["order_list"] });
|
|
},
|
|
onError: (err: AxiosError) => {
|
|
const errMessage = err.response?.data as { message: string };
|
|
const messageText = errMessage.message;
|
|
|
|
toast.error(messageText || "Xatolik yuz berdi", {
|
|
richColors: true,
|
|
position: "top-center",
|
|
});
|
|
},
|
|
});
|
|
|
|
const { mutate: update, isPending: updatePending } = useMutation({
|
|
mutationFn: ({ body, id }: { id: number; body: OrderUpdateReq }) =>
|
|
order_api.update({ body, id }),
|
|
onSuccess: () => {
|
|
setDialogOpen(false);
|
|
queryClient.resetQueries({ queryKey: ["order_list"] });
|
|
},
|
|
onError: (err: AxiosError) => {
|
|
const errMessage = err.response?.data as { message: string };
|
|
const messageText = errMessage.message;
|
|
|
|
toast.error(messageText || "Xatolik yuz berdi", {
|
|
richColors: true,
|
|
position: "top-center",
|
|
});
|
|
},
|
|
});
|
|
|
|
const form = useForm<SpecificationsFormType>({
|
|
resolver: zodResolver(SpecificationsForm),
|
|
defaultValues: {
|
|
client: "",
|
|
pharm: "",
|
|
user: "",
|
|
percentage: 0,
|
|
totalPrice: 0,
|
|
paidPrice: 0,
|
|
medicines: [],
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!pill) return;
|
|
|
|
if (initialValues) {
|
|
const mergedMedicines = [
|
|
...initialValues.order_items.map((item) => {
|
|
const pillItem = pill.results.find((p) => p.id === item.product);
|
|
|
|
return {
|
|
id: item.product,
|
|
name: pillItem ? pillItem.name : "Unknown",
|
|
price: pillItem ? Number(pillItem.price) : 0,
|
|
count: Number(item.quantity),
|
|
};
|
|
}),
|
|
|
|
...pill.results
|
|
.filter(
|
|
(p) => !initialValues.order_items.some((m) => m.product === p.id),
|
|
)
|
|
.map((p) => ({
|
|
id: p.id,
|
|
name: p.name,
|
|
price: Number(p.price),
|
|
count: 0,
|
|
})),
|
|
];
|
|
|
|
form.reset({
|
|
client: initialValues.employee_name,
|
|
pharm: String(initialValues.factory.id),
|
|
percentage: initialValues.advance,
|
|
totalPrice: Number(initialValues.total_price),
|
|
paidPrice: Number(initialValues.paid_price),
|
|
user: String(initialValues.user.id),
|
|
medicines: mergedMedicines,
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
const fakeMedicines = pill.results.map((p) => ({
|
|
id: p.id,
|
|
name: p.name,
|
|
price: Number(p.price),
|
|
count: 0,
|
|
}));
|
|
|
|
form.reset({
|
|
client: "",
|
|
pharm: "",
|
|
user: "",
|
|
percentage: 0,
|
|
totalPrice: 0,
|
|
paidPrice: 0,
|
|
medicines: fakeMedicines,
|
|
});
|
|
}, [pill, initialValues, form]);
|
|
|
|
const medicines = form.watch("medicines");
|
|
|
|
const calculateTotal = () => {
|
|
const medicines = form.getValues("medicines");
|
|
const total = medicines.reduce(
|
|
(acc, med) => acc + med.price * med.count,
|
|
0,
|
|
);
|
|
form.setValue("totalPrice", total);
|
|
|
|
const percentage = form.getValues("percentage") || 0;
|
|
const paid = Math.round((total * percentage) / 100);
|
|
form.setValue("paidPrice", paid);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const subscription = form.watch((__, { name }) => {
|
|
if (name?.startsWith("medicines") || name === "percentage")
|
|
calculateTotal();
|
|
});
|
|
return () => subscription.unsubscribe();
|
|
}, [form]);
|
|
|
|
const onSubmit = (values: SpecificationsFormType) => {
|
|
if (!initialValues) {
|
|
const items = medicines
|
|
.filter((med) => med.count > 0)
|
|
.map((med) => ({
|
|
product: med.id,
|
|
quantity: med.count,
|
|
total_price: (med.price * med.count).toFixed(2),
|
|
}));
|
|
|
|
const total_price = items
|
|
.reduce((sum, item) => sum + parseFloat(item.total_price), 0)
|
|
.toFixed(2);
|
|
|
|
create({
|
|
advance: values.percentage,
|
|
employee_name: values.client,
|
|
factory_id: Number(values.pharm),
|
|
paid_price: String(values.paidPrice),
|
|
total_price,
|
|
items,
|
|
user_id: Number(values.user),
|
|
});
|
|
} else if (initialValues) {
|
|
const items = medicines
|
|
.filter((med) => med.count > 0)
|
|
.map((med) => ({
|
|
product_id: med.id,
|
|
quantity: med.count,
|
|
total_price: (med.price * med.count).toFixed(2),
|
|
}));
|
|
|
|
const total_price = items
|
|
.reduce((sum, item) => sum + parseFloat(item.total_price), 0)
|
|
.toFixed(2);
|
|
|
|
update({
|
|
body: {
|
|
advance: values.percentage,
|
|
employee_name: values.client,
|
|
paid_price: String(values.paidPrice),
|
|
total_price,
|
|
items: items,
|
|
factory_id: Number(values.pharm),
|
|
user_id: Number(values.user),
|
|
},
|
|
id: initialValues.id,
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
|
<FormField
|
|
name="pharm"
|
|
control={form.control}
|
|
render={({ field }) => {
|
|
const selectedUser = pharm?.find(
|
|
(u) => String(u.id) === field.value,
|
|
);
|
|
return (
|
|
<FormItem className="flex flex-col">
|
|
<Label className="text-md">Farmasevtika</Label>
|
|
|
|
<Popover open={openFactory} onOpenChange={setOpenFactory}>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={openFactory}
|
|
className={cn(
|
|
"w-full h-12 justify-between",
|
|
!field.value && "text-muted-foreground",
|
|
)}
|
|
>
|
|
{selectedUser
|
|
? `${selectedUser.name}`
|
|
: "Foydalanuvchi tanlang"}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent
|
|
className="w-[--radix-popover-trigger-width] p-0"
|
|
align="start"
|
|
>
|
|
<Command shouldFilter={false}>
|
|
<CommandInput
|
|
placeholder="Qidirish..."
|
|
className="h-9"
|
|
value={factorySearch}
|
|
onValueChange={setFactorySearch}
|
|
/>
|
|
|
|
<CommandList>
|
|
{isPharmLoading ? (
|
|
<div className="py-6 text-center text-sm">
|
|
<Loader2 className="mx-auto h-4 w-4 animate-spin" />
|
|
</div>
|
|
) : pharm && pharm.length > 0 ? (
|
|
<CommandGroup>
|
|
{pharm.map((u) => (
|
|
<CommandItem
|
|
key={u.id}
|
|
value={`${u.id}`}
|
|
onSelect={() => {
|
|
field.onChange(String(u.id));
|
|
setOpenFactory(false);
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
field.value === String(u.id)
|
|
? "opacity-100"
|
|
: "opacity-0",
|
|
)}
|
|
/>
|
|
{u.name}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
) : (
|
|
<CommandEmpty>Farmasevtika topilmadi</CommandEmpty>
|
|
)}
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
);
|
|
}}
|
|
/>
|
|
|
|
<FormField
|
|
name="user"
|
|
control={form.control}
|
|
render={({ field }) => {
|
|
const selectedUser = user?.find(
|
|
(u) => String(u.id) === field.value,
|
|
);
|
|
return (
|
|
<FormItem className="flex flex-col">
|
|
<Label className="text-md">Foydalanuvchi</Label>
|
|
|
|
<Popover open={openUser} onOpenChange={setOpenUser}>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={openUser}
|
|
className={cn(
|
|
"w-full h-12 justify-between",
|
|
!field.value && "text-muted-foreground",
|
|
)}
|
|
>
|
|
{selectedUser
|
|
? `${selectedUser.first_name} ${selectedUser.last_name}`
|
|
: "Foydalanuvchi tanlang"}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
|
|
<PopoverContent
|
|
className="w-[--radix-popover-trigger-width] p-0"
|
|
align="start"
|
|
>
|
|
<Command shouldFilter={false}>
|
|
<CommandInput
|
|
placeholder="Qidirish..."
|
|
className="h-9"
|
|
value={userSearch}
|
|
onValueChange={setUserSearch}
|
|
/>
|
|
|
|
<CommandList>
|
|
{isUserLoading ? (
|
|
<div className="py-6 text-center text-sm">
|
|
<Loader2 className="mx-auto h-4 w-4 animate-spin" />
|
|
</div>
|
|
) : user && user.length > 0 ? (
|
|
<CommandGroup>
|
|
{user.map((u) => (
|
|
<CommandItem
|
|
key={u.id}
|
|
value={`${u.id}`}
|
|
onSelect={() => {
|
|
field.onChange(String(u.id));
|
|
setOpenUser(false);
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4",
|
|
field.value === String(u.id)
|
|
? "opacity-100"
|
|
: "opacity-0",
|
|
)}
|
|
/>
|
|
{u.first_name} {u.last_name} {u.region.name}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
) : (
|
|
<CommandEmpty>Foydalanuvchi topilmadi</CommandEmpty>
|
|
)}
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<FormMessage />
|
|
</FormItem>
|
|
);
|
|
}}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="client"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label>Xaridor Nomi</Label>
|
|
<FormControl>
|
|
<Input {...field} placeholder="Xaridor nomi..." />
|
|
</FormControl>{" "}
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Medicines list */}
|
|
<div className="space-y-2">
|
|
{medicines.map((med, index) => (
|
|
<div
|
|
key={med.id}
|
|
className="flex justify-between items-center space-x-2"
|
|
>
|
|
<div className="flex flex-col">
|
|
<p className="w-40">{med.name}</p>
|
|
<p>Narxi:{formatPrice(med.price)}</p>
|
|
</div>
|
|
|
|
<div className="flex gap-1">
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Soni"
|
|
className="w-20"
|
|
value={med.count}
|
|
onChange={(e) => {
|
|
let value = parseInt(e.target.value, 10);
|
|
if (isNaN(value)) value = 0;
|
|
|
|
const updatedMedicines = [...medicines];
|
|
updatedMedicines[index].count = value;
|
|
form.setValue("medicines", updatedMedicines);
|
|
calculateTotal();
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
|
|
<FormControl>
|
|
<Input
|
|
type="text"
|
|
placeholder="Narxi"
|
|
className="w-24"
|
|
value={formatPrice(med.price * med.count)}
|
|
readOnly
|
|
/>
|
|
</FormControl>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="percentage"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label>To'lov foizi (%)</Label>
|
|
<FormControl>
|
|
<Input
|
|
{...field}
|
|
className="w-full"
|
|
onChange={(e) => {
|
|
let value = parseInt(e.target.value, 10);
|
|
if (isNaN(value)) value = 0;
|
|
if (value < 0) value = 0;
|
|
if (value > 100) value = 100;
|
|
field.onChange(value);
|
|
calculateTotal();
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<FormField
|
|
control={form.control}
|
|
name="totalPrice"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label>Jami Narx</Label>
|
|
<FormControl>
|
|
<Input {...field} readOnly value={formatPrice(field.value)} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="paidPrice"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label>To'lanadi</Label>
|
|
<FormControl>
|
|
<Input {...field} readOnly value={formatPrice(field.value)} />
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={createPending || updatePending}
|
|
className="w-full bg-blue-500 hover:bg-blue-500 cursor-pointer h-12"
|
|
>
|
|
{createPending || updatePending ? <Loader2 /> : "Saqlash"}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
);
|
|
};
|