حركة المواد

---

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

الفايلات
columns.ts
useItemMovement.ts
ItemMovementView.tsx

---

columns.ts

import { ItemMovement } from "@/API/ItemMovement/ItemMovementReq";
import { formatDateTime } from "@/lib/utils";
import { ColumnDef } from "@tanstack/react-table";
import { TFunction } from "i18next";

export const getColumns = (t: TFunction): ColumnDef<ItemMovement>[] => [
  {
    accessorKey: "id",
    header: t("id"),
    size: 10,
    meta: {
      align: "center",
    },
  },
  {
    accessorKey: "itemName",
    header: t("pages.itemMovement.itemName"),
    size: 100,
  },
  {
    accessorKey: "currentTotalQuantity",
    header: t("pages.itemMovement.currentTotalQuantity"),
    meta: {
      align: "center",
    },
    size: 100,
  },
  {
    accessorKey: "changeInQuantity",
    header: t("pages.itemMovement.changeInQuantity"),
    meta: {
      align: "center",
    },
    size: 100,
  },
  {
    accessorKey: "itemType",
    header: t("pages.itemMovement.itemType"),
    cell: ({ row }) => {
      const itemType = row.getValue("itemType") as
        | "BasicIngredent"
        | "ReadyToSell";
      return itemType === "BasicIngredent"
        ? t("sidebar.basicIngredients")
        : t("sidebar.readyToSellProducts");
    },
    size: 100,
  },
  {
    accessorKey: "storeId",
    header: t("pages.itemMovement.storeId"),
    meta: {
      align: "center",
    },
    size: 100,
  },
  {
    accessorKey: "invMovementType",
    header: t("pages.itemMovement.invMovementType"),
    size: 100,
    cell: ({ row }) => {
      return (
        <div>{t(`pages.itemMovement.${row.getValue("invMovementType")}`)}</div>
      );
    },
  },
  {
    accessorKey: "createdAt",
    header: t("pages.itemMovement.createdAt"),
    cell: ({ row }) => {
      return <div dir="ltr">{formatDateTime(row.getValue("createdAt"))}</div>;
    },
    size: 150,
  },
];

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

---

useItemMovement.ts

export const GetInfinteScrollItemMovemntQuery = (
  query: string,
  sort: string,
  itemType?: "BasicIngredent" | "ReadyToSell" | null
) => {
  return useInfiniteQuery<ItemMovement[]>({
    queryKey: ["kitchens", query, sort, itemType],
    queryFn: async ({ pageParam = 0 }) => {
      const fetchSize = 10;
      const offset = (pageParam as number) * fetchSize;
      const fetchedData = await getInfinteItemMovement(
        offset,
        fetchSize,
        query,
        sort,
        itemType
      );
      return fetchedData;
    },
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages) => {
      const nextOffset = lastPage.length ? allPages.length : undefined;
      return nextOffset;
    },
  });
};

• هاي دالة تفيدك تعرض بيانات حركة المواد على شكل "scroll لانهائي"، كل ما المستخدم ينزل، تجيب بيانات جديدة من السيرفر، وتاخذ:

• query: كلمة البحث (فلترة)

• sort: ترتيب البيانات

• itemType: نوع المادة، ممكن يكون:

  • BasicIngredent
  • ReadyToSell

---

ItemMovementView.tsx

useEffect(() => {
  updateBreadcrumbs([
    {
      label: t("pages.itemMovement.title"),
      link: "/item-movement",
    },
  ]);
}, [i18n.language]);
const columns = useMemo(() => getColumns(t), [i18n.language]);

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