feat: add mode prop to Field and TypeTag components for enhanced functionality

fix: update onCount call in ListUIClean component to pass parameters correctly
feat: enhance SidebarBetter component to display notification count
feat: improve DialogContent component to accept custom close class
feat: implement convertFormObject utility function for form data processing

components/form/Field.tsx

@@ -73,6 +73,7 @@ export interface FieldProps {
   styleField?: string | null;
   isDebounce?: boolean;
   data?: any;
+  mode?: string;
 }
 export const Field: React.FC<FieldProps> = ({
   fm,
@@ -108,6 +109,7 @@ export const Field: React.FC<FieldProps> = ({
   description,
   styleField,
   isDebounce = false,
+  mode,
 }) => {
   let result = null;
   const field = useLocal({
@@ -470,6 +472,7 @@ export const Field: React.FC<FieldProps> = ({
                   disabled={is_disable}
                   className={className}
                   onChange={onChange}
+                  mode={mode}
                 />
               </>
             ) : (

components/form/field/TypeTag.tsx

@@ -14,6 +14,7 @@ export const TypeTag: React.FC<any> = ({
   field,
   onChange,
   styleField,
+  mode,
 }) => {
   const [tags, setTags] = useState<string[]>(fm.data?.[name] || []);
   const [inputValue, setInputValue] = useState("");

components/list/ListUIClean.tsx

@@ -80,7 +80,7 @@ export const ListUIClean: React.FC<any> = ({
               content={content}
               onLoad={onLoad}
               onCount={async (params: any) => {
-                const result = await onCount();
+                const result = await onCount(params);
                 local.count = result;
                 local.render();
                 return result;

components/partials/SidebarBetter.tsx

@@ -659,7 +659,14 @@ const SidebarBetterTree: React.FC<TreeMenuProps> = ({
                     </g>
                   </svg>
                 </div>
-                {!mini && "Notifications"}
+                {!mini && (
+                  <div className="flex flex-row gap-x-2 items-center">
+                    Notifications{" "}
+                    <div className="p-0.5 text-2xs rounded-full bg-red-500 text-white min-w-6 h-6 flex flex-row items-center justify-center">
+                      912
+                    </div>
+                  </div>
+                )}
               </div>
             </Popover>
           </div>

components/ui/dialog.tsx

@@ -31,8 +31,10 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, onClick, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    classClose?: string;
+  }
+>(({ className, children, classClose, onClick, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -47,13 +49,21 @@ const DialogContent = React.forwardRef<
       {typeof onClick === "function" ? (
         <div
           onClick={onClick}
-          className="dialog-close cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+          className={cn(
+            "dialog-close cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+            classClose
+          )}
         >
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </div>
       ) : (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <DialogPrimitive.Close
+          className={cn(
+            "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+            classClose
+          )}
+        >
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>

utils/convertObjectForm.ts

@@ -0,0 +1,26 @@
+export const convertFormObject = ({
+  data,
+  form = new FormData(),
+  task,
+}: {
+  data: any;
+  form?: FormData;
+  task: ({
+    keys,
+    value,
+    form,
+  }: {
+    keys: string;
+    value: any;
+    form: FormData;
+  }) => void;
+}) => {
+  function processObject(obj: any, parentKey: string = "") {
+    for (const [key, value] of Object.entries(obj)) {
+      task({ keys: key, value, form });
+    }
+  }
+
+  processObject(data);
+  return form;
+};