fix: 🐛 Eliminación y agregación de registros a pagar

YinnerC30 · Aug 22, 2024 · c370347 · c370347
1 parent 6527fcc
commit c370347
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 81 deletions.
diff --git a/src/modules/core/components/form/FormFieldSelect.tsx b/src/modules/core/components/form/FormFieldSelect.tsx
@@ -36,7 +36,7 @@ export const FormFieldSelect = ({
       control={control}
       name={name}
       render={({ field }: any) => (
-        <FormItem className={className}>
+        <FormItem className={className + "ml-1"}>
           <FormLabel>{label}</FormLabel>
           <div className="w-48 ">
             <Select

diff --git a/src/modules/core/components/table/DataTableForm.tsx b/src/modules/core/components/table/DataTableForm.tsx
@@ -42,6 +42,7 @@ interface Props {
   sideEffect?: any;
   nameColumnToFilter: string;
   placeholderInputToFilter: string;
+  showFilter?: boolean;
 }
 
 export function DataTableForm({
@@ -51,6 +52,7 @@ export function DataTableForm({
   sideEffect,
   placeholderInputToFilter,
   nameColumnToFilter,
+  showFilter = true,
 }: Props) {
   const [sorting, setSorting] = useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -76,12 +78,14 @@ export function DataTableForm({
   const messageCountPage =
     pageCount > 0 ? pageText : `Página ${pageIndex} de ${pageCount}`;
 
-
-
   return (
     <>
       <div className="w-[600px]">
-        <div className="flex flex-col items-start justify-between gap-2 my-2 ml-1">
+        <div
+          className={`flex flex-col items-start justify-between gap-2 my-2 ml-1 ${
+            showFilter ? "" : "hidden"
+          }`}
+        >
           <Input
             placeholder={placeholderInputToFilter}
             value={

diff --git a/src/modules/core/components/table/actions/ItemNavigate.tsx b/src/modules/core/components/table/actions/ItemNavigate.tsx
@@ -6,7 +6,7 @@ import { useNavigate } from "react-router-dom";
 interface Props {
   path: string;
   Icon: React.ForwardRefExoticComponent<
-    IconProps & React.RefAttributes<SVGSVGElement>
+    IconProps & React.RefAttributes<SVGSVGElement> | any
   >;
   name: string;
 }

diff --git a/src/modules/payments/components/TablesPendingPayments.tsx b/src/modules/payments/components/TablesPendingPayments.tsx
@@ -1,4 +1,4 @@
-import { Label, Separator } from "@/components";
+import { FormLabel, Label, Separator } from "@/components";
 import { ErrorLoading, Loading } from "@/modules/core/components";
 import { RootState, useAppDispatch, useAppSelector } from "@/redux/store";
 import { useEffect } from "react";
@@ -10,15 +10,23 @@ import { DataTableForm } from "@/modules/core/components/table/DataTableForm";
 import { toast } from "sonner";
 import { columnsPaymentsPendingHarvestActions } from "./columns/ColumnsTablePaymentsPendingHarvest";
 import { columnsPaymentsPendingWorkActions } from "./columns/ColumnsTablePaymentsPendingWork";
-import { columnsPaymentsToPayActions } from "./columns/ColumnsTablePaymentsToPay";
+import {
+  columnsPaymentsToPayActions,
+  columnsPaymentsToPayActionsView,
+} from "./columns/ColumnsTablePaymentsToPay";
 import { UseFormReturn } from "react-hook-form";
 
 interface Props {
   employeeId: string;
   form: UseFormReturn<any, any, undefined>;
+  readOnly?: boolean;
 }
 
-export const TablesPendingPayments = ({ employeeId, form }: Props) => {
+export const TablesPendingPayments = ({
+  employeeId,
+  form,
+  readOnly = false,
+}: Props) => {
   const { data, isLoading, isError } =
     useGetEmployeePendingPayments(employeeId);
 
@@ -59,39 +67,52 @@ export const TablesPendingPayments = ({ employeeId, form }: Props) => {
 
   return (
     <>
-      <Label className="text-xl">Pagos pendientes de cosecha:</Label>
+      {!readOnly && (
+        <>
+          <Label className="">Pagos pendientes de cosecha:</Label>
+          <DataTableForm
+            data={dataEmployee?.harvests_detail ?? []}
+            columns={columnsPaymentsPendingHarvestActions}
+            nameColumnToFilter={"value_pay"}
+            placeholderInputToFilter={""}
+            showFilter={false}
+          />
+          <Separator className="my-4" />
+        </>
+      )}
 
-      <DataTableForm
-        data={dataEmployee?.harvests_detail ?? []}
-        columns={columnsPaymentsPendingHarvestActions}
-        nameColumnToFilter={"value_pay"}
-        placeholderInputToFilter={""}
-      />
-      <Separator className="my-4" />
-
-      <Label className="text-xl">Pagos pendientes de trabajo:</Label>
-      <DataTableForm
-        data={dataEmployee?.works_detail ?? []}
-        columns={columnsPaymentsPendingWorkActions}
-        nameColumnToFilter={""}
-        placeholderInputToFilter={""}
-      />
-
-      <Separator className="my-4" />
+      {!readOnly && (
+        <>
+          <Label className="">Pagos pendientes de trabajo:</Label>
+          <DataTableForm
+            data={dataEmployee?.works_detail ?? []}
+            columns={columnsPaymentsPendingWorkActions}
+            nameColumnToFilter={""}
+            placeholderInputToFilter={""}
+            showFilter={false}
+          />
+          <Separator className="my-4" />
+        </>
+      )}
 
       <FormFieldDataTable
         control={form.control}
-        description={"Aquí se muestran los pagos que finalmente se liquidaran "}
+        description={""}
         label={"Resumen a pagar:"}
         name={"categories"}
         placeholder={"placeholder"}
         readOnly={false}
       >
         <DataTableForm
           data={paymentsToPay ?? []}
-          columns={columnsPaymentsToPayActions}
+          columns={
+            readOnly
+              ? columnsPaymentsToPayActionsView
+              : columnsPaymentsToPayActions
+          }
           nameColumnToFilter={""}
           placeholderInputToFilter={""}
+          showFilter={false}
         />
       </FormFieldDataTable>
     </>

diff --git a/src/modules/payments/components/columns/ActionsTablePaymentsToPayView.tsx b/src/modules/payments/components/columns/ActionsTablePaymentsToPayView.tsx
@@ -0,0 +1,30 @@
+import { ActionsTable } from "@/modules/core/components";
+import { ItemCopyIdRecord } from "@/modules/core/components/table/actions/ItemCopyIdRecord";
+import { ItemNavigate } from "@/modules/core/components/table/actions/ItemNavigate";
+import { Link } from "lucide-react";
+import { useState } from "react";
+
+export const ActionsTablePaymentsToPayView = ({ record }: any) => {
+  const [openDropDownMenu, setOpenDropDownMenu] = useState(false);
+
+  console.log({ record });
+
+  return (
+    <ActionsTable
+      setOpenDropDownMenu={setOpenDropDownMenu}
+      openDropDownMenu={openDropDownMenu}
+    >
+      <ItemCopyIdRecord
+        id={record.id}
+        setOpenDropDownMenu={setOpenDropDownMenu}
+      ></ItemCopyIdRecord>
+      <ItemNavigate
+        path={`/${record.type === "harvest" ? "harvests" : "works"}/view/${
+          record.type === "harvest" ? record?.harvest?.id : record?.work?.id
+        }`}
+        Icon={Link}
+        name={"Ver registro"}
+      />
+    </ActionsTable>
+  );
+};
diff --git a/src/modules/payments/components/columns/ColumnsTablePaymentsPendingHarvest.tsx b/src/modules/payments/components/columns/ColumnsTablePaymentsPendingHarvest.tsx
@@ -125,6 +125,7 @@ export const columnsPaymentsPendingHarvestActions = [
             value_pay,
             payment_is_pending,
             type: "harvest",
+            harvest: { id: harvestDetail?.harvest?.id },
           })
         );
         dispatch(calculateTotal());

diff --git a/src/modules/payments/components/columns/ColumnsTablePaymentsPendingWork.tsx b/src/modules/payments/components/columns/ColumnsTablePaymentsPendingWork.tsx
@@ -108,6 +108,7 @@ export const columnsPaymentsPendingWorkActions = [
             value_pay,
             payment_is_pending,
             type: "work",
+            work: { id: workDetail?.work?.id },
           })
         );
         dispatch(calculateTotal());

diff --git a/src/modules/payments/components/columns/ColumnsTablePaymentsToPay.tsx b/src/modules/payments/components/columns/ColumnsTablePaymentsToPay.tsx
@@ -13,6 +13,7 @@ import { FormatMoneyValue } from "@/modules/core/helpers/FormatMoneyValue";
 import { PaymentPending } from "../../interfaces/PaymentPending";
 import { calculateTotal, removeRecordToPay } from "../../utils/paymentSlice";
 import { ActionsTablePaymentsToPay } from "./ActionsTablePaymentsToPay";
+import { ActionsTablePaymentsToPayView } from "./ActionsTablePaymentsToPayView";
 
 export const columnsPaymentsToPay: ColumnDef<PaymentPending>[] = [
   {
@@ -79,9 +80,9 @@ export const columnsPaymentsToPay: ColumnDef<PaymentPending>[] = [
     cell: ({ row }) => {
       const value = row.getValue("type");
       return value === "harvest" ? (
-        <Badge variant={"lime"}>Harvest</Badge>
+        <Badge variant={"lime"}>Cosecha</Badge>
       ) : (
-        <Badge variant={"orange"}>Work</Badge>
+        <Badge variant={"orange"}>Trabajo</Badge>
       );
     },
     header: ({ column }: any) => {
@@ -109,8 +110,18 @@ export const columnsPaymentsToPayActions = [
       const dispatch = useAppDispatch();
 
       const handleDelete = () => {
+        const { date, ...rest } = record;
+
+        const data = {
+          ...rest,
+          [rest.type === "harvest" ? "harvest" : "work"]: {
+            id: rest[rest.type === "harvest" ? "harvest" : "work"].id,
+            date,
+          },
+        };
+
+        dispatch(removeRecordToPay({ ...data }));
         dispatch(calculateTotal());
-        dispatch(removeRecordToPay({ ...record }));
         toast.success(`Se ha eliminado el registro`);
       };
 
@@ -121,7 +132,22 @@ export const columnsPaymentsToPayActions = [
   },
 ];
 
+export const columnsPaymentsToPayActionsView = [
+  ...columnsPaymentsToPay,
+  {
+    id: "actions",
+    cell: ({ row }: any) => {
+      const record = row.original;
+
+      console.log({ record });
+
+      return <ActionsTablePaymentsToPayView record={record} />;
+    },
+  },
+];
+
 export default {
   columnsPaymentsToPay,
   columnsPaymentsToPayActions,
+  columnsPaymentsToPayActionsView,
 };