Adding Chips in Document.

src/components/Documents/DocumentFilterChips.jsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from "react";
+import moment from "moment";
+
+const DocumentFilterChips = ({ filters, filterData, removeFilterChip }) => {
+    const filterChips = useMemo(() => {
+        const chips = [];
+
+        const buildGroup = (ids, list, label, key) => {
+            if (!ids?.length) return;
+            const items = ids.map((id) => ({
+                id,
+                name: list.find((item) => item.id === id)?.name || id,
+            }));
+            chips.push({ key, label, items });
+        };
+
+        // Build chips from document filters
+        buildGroup(filters.uploadedByIds, filterData.data.uploadedBy || [], "Uploaded By", "uploadedByIds");
+        buildGroup(filters.documentCategoryIds, filterData.data.documentCategory || [], "Category", "documentCategoryIds");
+        buildGroup(filters.documentTypeIds, filterData.data.documentType || [], "Type", "documentTypeIds");
+        buildGroup(filters.documentTagIds, filterData.data.documentTag || [], "Tags", "documentTagIds");
+
+        if (filters.statusIds?.length) {
+            const items = filters.statusIds.map((status) => ({
+                id: status,
+                name:
+                    status === true
+                        ? "Verified"
+                        : status === false
+                            ? "Rejected"
+                            : "Pending",
+            }));
+            chips.push({ key: "statusIds", label: "Status", items });
+        }
+
+        if (filters.startDate || filters.endDate) {
+            const start = filters.startDate ? moment(filters.startDate).format("DD-MM-YYYY") : "";
+            const end = filters.endDate ? moment(filters.endDate).format("DD-MM-YYYY") : "";
+            chips.push({
+                key: "dateRange",
+                label: "Date Range",
+                items: [{ id: "dateRange", name: `${start} - ${end}` }],
+            });
+        }
+
+        return chips;
+    }, [filters, filterData]);
+
+    if (!filterChips.length) return null;
+
+    console.log("Kartik", filterData.uploadedBy)
+
+    return (
+        <div className="row my-2">
+            <div className="col-12">
+                <div className="d-flex flex-wrap align-items-start gap-1">
+                    {filterChips.map((chip) => (
+                        <div key={chip.key} className="d-flex align-items-center flex-wrap px-2 py-1" style={{ fontSize: "0.9rem" }}>
+                            <span className="fw-semibold me-2">{chip.label}:</span>
+                            <div className="d-flex flex-wrap align-items-center gap-1">
+                                {chip.items.map((item) => (
+                                    <span key={item.id} className="d-flex align-items-center bg-light rounded px-2 py-1 text-xs">
+                                        <span>{item.name}</span>
+                                        <button
+                                            type="button"
+                                            className="btn-close btn-close-white btn-sm ms-2"
+                                            style={{ filter: "invert(1) grayscale(1)", opacity: 0.7, fontSize: "0.6rem" }}
+                                            onClick={() => removeFilterChip(chip.key, item.id)}
+                                        />
+                                    </span>
+                                ))}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DocumentFilterChips;

src/components/Documents/DocumentFilterPanel.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState,useMemo } from "react";
 import { useDocumentFilterEntities } from "../../hooks/useDocument";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -9,16 +9,33 @@ import {
 import { DateRangePicker1 } from "../common/DateRangePicker";
 import SelectMultiple from "../common/SelectMultiple";
 import moment from "moment";
+import { useParams } from "react-router-dom";
 
-const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
+const DocumentFilterPanel = ({ entityTypeId, onApply,setFilterdata }) => {
   const [resetKey, setResetKey] = useState(0);
+  const { status } = useParams();
 
   const { data, isError, isLoading, error } =
     useDocumentFilterEntities(entityTypeId);
 
+    //changes
+
+    const dynamicDocumentFilterDefaultValues = useMemo(() => {
+    return {
+      ...DocumentFilterDefaultValues,
+      uploadedByIds: DocumentFilterDefaultValues.uploadedByIds || [],
+      documentCategoryIds: DocumentFilterDefaultValues.documentCategoryIds || [],
+      documentTypeIds: DocumentFilterDefaultValues.documentTypeIds || [],
+      documentTagIds: DocumentFilterDefaultValues.documentTagIds || [],
+      startDate: DocumentFilterDefaultValues.startDate,
+      endDate: DocumentFilterDefaultValues.endDate,
+    };
+
+  }, [status]);
+
   const methods = useForm({
     resolver: zodResolver(DocumentFilterSchema),
-    defaultValues: DocumentFilterDefaultValues,
+    defaultValues: dynamicDocumentFilterDefaultValues,
   });
 
   const { handleSubmit, reset, setValue, watch } = methods;
@@ -32,6 +49,14 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
     document.querySelector(".offcanvas.show .btn-close")?.click();
   };
 
+   //changes
+    useEffect(() => {
+    if (data && setFilterdata) {
+      setFilterdata(data);
+    }
+  }, [data, setFilterdata]);
+  console.log("Veer",data)
+
   const onSubmit = (values) => {
     onApply({
       ...values,
@@ -63,6 +88,8 @@ const DocumentFilterPanel = ({ entityTypeId, onApply }) => {
     documentTag = [],
   } = data?.data || {};
 
+ 
+
   return (
     <FormProvider {...methods}>
       <form onSubmit={handleSubmit(onSubmit)}>

src/components/Documents/Documents.jsx

@@ -17,6 +17,7 @@ import ViewDocument from "./ViewDocument";
 import DocumentViewerModal from "./DocumentViewerModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProfile } from "../../hooks/useProfile";
+import DocumentFilterChips from "./DocumentFilterChips";
 
 // Context
 export const DocumentContext = createContext();
@@ -51,12 +52,13 @@ const Documents = ({ Document_Entity, Entity }) => {
   const [isSelf, setIsSelf] = useState(false);
   const [searchText, setSearchText] = useState("");
   const [isActive, setIsActive] = useState(true);
-  const [filters, setFilter] = useState();
+  const [filters, setFilter] = useState(DocumentFilterDefaultValues);
   const [isRefetching, setIsRefetching] = useState(false);
   const [refetchFn, setRefetchFn] = useState(null);
   const [DocumentEntity, setDocumentEntity] = useState(Document_Entity);
   const { employeeId } = useParams();
   const [OpenDocument, setOpenDocument] = useState(false);
+  const [filterData, setFilterdata] = useState(DocumentFilterDefaultValues);
   const [ManageDoc, setManageDoc] = useState({
     document: null,
     isOpen: false,
@@ -92,7 +94,7 @@ const Documents = ({ Document_Entity, Entity }) => {
     setShowTrigger(true);
     setOffcanvasContent(
       "Document Filters",
-      <DocumentFilterPanel entityTypeId={DocumentEntity} onApply={setFilter} />
+      <DocumentFilterPanel entityTypeId={DocumentEntity} onApply={setFilter} setFilterdata={setFilterdata} />
     );
 
     return () => {
@@ -100,7 +102,7 @@ const Documents = ({ Document_Entity, Entity }) => {
       setOffcanvasContent("", null);
     };
   }, []);
-
+console.log("Testing",filterData)
   const contextValues = {
     ManageDoc,
     setManageDoc,
@@ -115,10 +117,23 @@ const Documents = ({ Document_Entity, Entity }) => {
       setDocumentEntity(Document_Entity);
     }
   }, [Document_Entity]);
+
+  
+  const removeFilterChip = (key, id) => {
+    const updatedFilters = { ...filters };
+    if (Array.isArray(updatedFilters[key])) {
+      updatedFilters[key] = updatedFilters[key].filter((v) => v !== id);
+    } else {
+      updatedFilters[key] = null;
+    }
+    setFilter(updatedFilters);
+  };
+
   return (
     <DocumentContext.Provider value={contextValues}>
       <div className="mt-2">
         <div className="card page-min-h d-flex p-2">
+           <DocumentFilterChips filters={filters} filterData={filterData} removeFilterChip={removeFilterChip} />
           <div className="row align-items-center">
             {/* Search */}
             <div className="d-flex col-8 col-md-8 col-lg-4 mb-md-0 align-items-center">
@@ -231,4 +246,4 @@ const Documents = ({ Document_Entity, Entity }) => {
   );
 };
 
-export default Documents;
+export default Documents;