Two filters

src/components/AntDesign/inputs/Autocomplete_ClientNameDetails.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from "react";
+import { AutoComplete } from "antd";
+
+const Autocomplete_ClientNameDetails: React.FC<{ details_array: any; loading: boolean; value: string; setNamesFilter: (value: string) => void }> = ({
+ details_array,
+ loading,
+ setNamesFilter
+}) => {
+ let namesOptions = details_array.map((item: any) => ({ value: item.client_id }));
+
+ const uniqueNames = {};
+ namesOptions = namesOptions.filter((item: any) => {
+ if (uniqueNames[item.value]) {
+ return false;
+ } else {
+ uniqueNames[item.value] = true;
+ return true;
+ }
+ });
+
+ namesOptions.sort((a: any, b: any) => a.value - b.value);
+
+ const [value, setValue] = useState("");
+ const [options, setOptions] = useState<{ value: string }[]>(namesOptions);
+
+ const onSelect = (data: string) => {
+ onChange(data);
+ setNamesFilter(data);
+ };
+
+ const onChange = (data: string) => {
+ setValue(data);
+ if (data === "") {
+ setOptions(namesOptions);
+ } else {
+ setOptions(namesOptions.filter((option) => option.value.toString().includes(data)));
+ }
+ setNamesFilter(data);
+};
+
+ return (
+ <AutoComplete
+ value={value}
+ options={options}
+ style={{ width: 200 }}
+ onSelect={onSelect}
+ onChange={onChange}
+ placeholder="id de cliente"
+ />
+ );
+};
+
+export default Autocomplete_ClientNameDetails;

src/components/AntDesign/inputs/Autocomplete_Mail.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { AutoComplete } from "antd";
+
+const mockVal = (str: string, repeat = 1) => ({
+ value: str.repeat(repeat),
+});
+
+const Autocomplete_Mail: React.FC<{ profiles: any; loading: boolean; value: string; setEmailFilter: (value: string) => void }> = ({
+ profiles,
+ loading,
+ setEmailFilter
+}) => {
+ let emailsArray = profiles.result.data.rows.map((row) => row[3]);
+ // Mapear emailsArray a la estructura esperada
+ let emailOptions = emailsArray.map(email => ({ value: email }));
+ const [value, setValue] = useState("");
+ const [options, setOptions] = useState<{ value: string }[]>(emailOptions);
+
+ const onSelect = (data: string) => {
+ onChange(data);
+ };
+
+ const onChange = (data: string) => {
+ setValue(data);
+ setOptions(emailOptions.filter((option) => option.value.includes(data)));
+ setEmailFilter(data); // Aquí llamamos a setEmailFilter
+ };
+
+ return (
+ <>
+ <AutoComplete
+ value={value}
+ options={options}
+ style={{ width: 200 }}
+ onSelect={onSelect}
+ onChange={onChange}
+ placeholder="email"
+ />
+ </>
+ );
+};
+
+export default Autocomplete_Mail;

src/components/AntDesign/tables/Details_table.tsx

@@ -55,18 +55,15 @@ const EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({
  );
 };
 
-const App: React.FC<{detailsResult: any, loadingDetails: boolean}> = ({ detailsResult, loadingDetails }) => {
+const App: React.FC<{detailsArray: ServiceConsumption_type[], loadingDetails: boolean}> = ({ detailsArray, loadingDetails }) => {
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [editingKey, setEditingKey] = useState('');
  const [deletingKey, setDeletingKey] = useState('');
 
- const details = detailsResult?.result?.data as ServiceConsumption_type[];
- const result = detailsResult?.result as Result;
-
  useEffect(() => {
- if (result?.count > 0) {
- const dataWithKeys = details.map((row, index) => {
+ if (detailsArray.length > 0) {
+ const dataWithKeys = detailsArray.map((row, index) => {
  let rowData = {};
  Object.entries(row).forEach(([key, value]) => {
  rowData[key] = value;
@@ -75,7 +72,7 @@ const App: React.FC<{detailsResult: any, loadingDetails: boolean}> = ({ detailsR
  });
  setData(dataWithKeys);
  }
- }, [details]);
+ }, [detailsArray]);
 
  const isEditing = (record: Item) => record.key === editingKey;
 

src/sections/Manager_section/Manager_section_details.tsx

@@ -1,8 +1,10 @@
 import type { sessionInfoState } from "@/models/types";
 import { ConfigProvider } from 'antd';
+import React, { useState, useEffect } from "react";
 
 import Details_table from "@/components/AntDesign/tables/Details_table";
 import Detail_post_modal from "@/components/AntDesign/modals/Detail_post_modal";
+import Autocomplete_ClientNameDetails from "@/components/AntDesign/inputs/Autocomplete_ClientNameDetails";
 
 import useGetDetails from '@/services/client/customhooks/useGetDetails';
 import useGetClients from '@/services/client/customhooks/useGetClients';
@@ -15,18 +17,24 @@ export default function Manager_section_details(props: {sessionInfo: sessionInfo
  const { employees, loading } = useGetEmployees();
  const { services, loadingServices } = useGetServices();
 
-  console.log({ details, clients, employees, services });
+ const [clientFilter, setClientFilter] = useState(null);
 
- // @ts-ignore
- const details_array = details && details.result && details.result?.data ? details.result.data : [];
- // @ts-ignore
- const clients_array = clients && clients.result && clients.result?.data ? clients.result.data : [];
- // @ts-ignore
- const employees_array = employees && employees.result && employees.result?.data ? employees.result.data : [];
- // @ts-ignore
- const services_array = services && services.result && services.result?.data ? services.result.data : [];
-
- console.log({ details_array, clients_array, employees_array, services_array });
+ const setNewDetailsNameSurnameFilter = (value: string) => {
+ value ? setClientFilter(value) : setClientFilter(null);
+ };
+
+ // @ts-ignore
+ const originalDetailsArray = details && details.result && details.result?.data ? details.result.data : [];
+ let details_array = originalDetailsArray;
+ if (clientFilter) {
+ details_array = originalDetailsArray.filter((item) => item.client_id === clientFilter);
+ }
+ // @ts-ignore
+ const clients_array = clients && clients.result && clients.result?.data ? clients.result.data : [];
+ // @ts-ignore
+ const employees_array = employees && employees.result && employees.result?.data ? employees.result.data : [];
+ // @ts-ignore
+ const services_array = services && services.result && services.result?.data ? services.result.data : [];
 
  return (
  <>
@@ -41,8 +49,9 @@ export default function Manager_section_details(props: {sessionInfo: sessionInfo
  },
  }}
  >
+ {details?.result?.data && <Autocomplete_ClientNameDetails details_array={details_array} loading={loading} setNamesFilter={setNewDetailsNameSurnameFilter} />}
  <Detail_post_modal clients={clients_array} employees={employees_array} details={details_array} services={services_array} />
- <Details_table detailsResult={details} loadingDetails={loadingDetails} />
+ <Details_table detailsArray={details_array} loadingDetails={loadingDetails} />
  </ConfigProvider>
  </>
  );

src/sections/Manager_section/Manager_section_profiles.tsx

@@ -1,12 +1,31 @@
 import type { sessionInfoState } from "@/models/types";
 import { ConfigProvider } from 'antd';
+import React, { useState, useEffect } from "react";
 
 import Profiles_table from "@/components/AntDesign/tables/Profiles_table";
+import Autocomplete_Mail from "@/components/AntDesign/inputs/Autocomplete_Mail";
 
 import useGetProfiles from '@/services/client/customhooks/useGetProfiles';
 
 export default function Manager_section_profiles(props: {sessionInfo: sessionInfoState}) {
  const { profiles, loading } = useGetProfiles();
+ const [filteredProfilesResult, setFilteredProfilesResult] = useState(null);
+
+ const setNewEmailFilter = (value: string) => {
+ if (value === "") {
+ setFilteredProfilesResult(profiles);
+ } else {
+ let newFilteredProfiles = JSON.parse(JSON.stringify(profiles));
+ if (newFilteredProfiles && newFilteredProfiles.result && newFilteredProfiles.result.data) {
+ newFilteredProfiles.result.data.rows = newFilteredProfiles.result.data.rows.filter((row) => row[3].includes(value));
+ }
+ setFilteredProfilesResult(newFilteredProfiles);
+ }
+ }
+
+ useEffect(() => {
+ setFilteredProfilesResult(profiles);
+ }, [profiles]);
 
  return (
  <>
@@ -21,8 +40,9 @@ export default function Manager_section_profiles(props: {sessionInfo: sessionInf
  },
  }}
  >
- <Profiles_table profiles={profiles} loading={loading} />
+ {profiles?.result?.data && <Autocomplete_Mail profiles={profiles} loading={loading} setEmailFilter={setNewEmailFilter} />}
+ <Profiles_table profiles={filteredProfilesResult} loading={loading} />
  </ConfigProvider>
  </>
  );
-}
+}