صفحة التوصيل

---

فايلات الفولدر

فايلات
DeliveryEmployeesRequest.ts
useDeliveryEmployees.ts
DeliveryEmployeesView.tsx

---

DeliveryEmployeesRequest.ts

export const schema = z.object({
  name: z.string({ required_error: "يجب ادخال اسم موظف التوصيل" }),
  phoneNumber: z
    .string()
    .optional()
    .refine((val) => !val || /^[0-9]{10,11}$/.test(val), {
      message: "الرقم الموظف يجب ان يحتوي على الاقل 10 ارقام ولا يتجاوز 11 رقم",
    }),
});

• هاي السكيما مال الفورمة مال مدخلات الموظف
• بيها بعض المدخلات اجبارية مثل الاسم وبعضها اختيارية مثل رقم الهاتف والي مستخدم Reqular Expression علمود تدخل بس رقم والي يكون عددة 10 او 11 رقم

---

useDeliveryEmployees.ts

const { data } = useGetDeliveryEmployees();
const useCreateDeliveryEmployeeMutation = useMutation({
  mutationFn: createDeliveryEmployee,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["delivery-employees"],
    });
    setOpenDialog(false);
    setSelectedEmployee(null);
    reset({ name: undefined, phoneNumber: undefined });
  },
});
const useDeleteDeliveryEmployeeMutaiton = useMutation({
  mutationFn: deleteDeliveryEmployee,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["delivery-employees"],
    });
    setOpenDeleteDialog(false);
    setSelectedEmployee(null);
  },
});
const useEditDeliveryEmployeeMutaiton = useMutation({
  mutationFn: editDeliveryEmployee,
  onSuccess: () => {
    queryClient.invalidateQueries({
      queryKey: ["delivery-employees"],
    });
    setOpenDialog(false);
    setSelectedEmployee(null);
    reset({ name: undefined, phoneNumber: undefined });
  },
});

• هنا عندي مجموعة من الدوال الي راح تنفذ عمليات ال CRUD وكل وحدة في حال نجحت وجانت محتاجة كاش جديدة راح تسوي re-fetch للداتا لان الكاش القديم بعد ما منة فايدة
• وايضا راح تتصفر القيم وراح تغلق النوافذ من راح تنجح عملية من العمليات الكدامك

const openAddDialog = () => {
  setSelectedEmployee(null);
  setOpenDialog(true);
  reset({ name: undefined, phoneNumber: undefined });
};
//
const openEditDialog = (id: number) => {
  const employee = data?.find((emp) => emp.id == id);
  if (employee) {
    setSelectedEmployee(employee.id);
    setOpenDialog(true);
    reset({
      name: employee.name,
      phoneNumber: employee.phoneNumber,
    });
  }
};

• هاي الدالتين وحدة راح تفتح نافذة الاضافة او الفورمة مال الاضافة وراح ترست البيانات مالتك وترجعها بدون قيم
• الدالة اللخ راح تفتح همينة النافذة مال التعديل والي تجيك اذا اكو موظف بال Id الي اجاه واذا اكو راح يفتح النافذة وراح يحط القيم مال الموظف الحالي بالمدخلات الموجودة

const handleDeleteDialog = (id: number) => {
  const employee = data?.find((emp) => emp.id == id);
  if (employee) {
    setSelectedEmployee(id);
    setOpenDeleteDialog(true);
  }
};
const handleDeleteOnclick = () => {
  if (selectedEmployee) {
    useDeleteDeliveryEmployeeMutaiton.mutate(selectedEmployee);
  }
};

const onSubmit = (data: DeliveryEmployeesRequest) => {
  if (selectedEmployee) {
    useEditDeliveryEmployeeMutaiton.mutate({ id: selectedEmployee, ...data });
  } else {
    useCreateDeliveryEmployeeMutation.mutate(data);
  }
};

• هذني الدوال الي راح نستخدمها بال View مالتك والي كل وحدة خاصة بعملية من العمليات
• بال onSubmit راح تشوف اذا اكو موظف حالي فهاي راح تنفذ مال التعديل اما اذا ماكو فراح تسوي عملية اضافة جديدة

---

DeliveryEmployeesView.tsx

const { updateBreadcrumbs } = useBreadcrumbs();
useTitle(t("pages.management.delivery.title"));
useEffect(() => {
  updateBreadcrumbs([
    {
      label: t("pages.management.delivery.title"),
      link: "/delivery",
    },
  ]);
}, [i18n.language]);

• هنا راح تتحدث التايتل مال الصفحة لمن تتغير اللغة مالتك الي موجودة بالصفحة
• باقي الصفحة هو مجرد عرض للمحتويات وتنفيذ لل لوجك مالتك الي صار بالفايلات الفوك وبعض ال Components الي تتكرر راح يتم شرحها بالفولدر مال الملفات المشتركة