fix: blocked issues, style: issue details sidebar

apps/app/components/project/cycles/cycle-issues-list-modal.tsx

@@ -28,7 +28,7 @@ type Props = {
 };
 
 type FormInput = {
-  issue: string[];
+  issues: string[];
 };
 
 const CycleIssuesListModal: React.FC<Props> = ({
@@ -56,12 +56,12 @@ const CycleIssuesListModal: React.FC<Props> = ({
     formState: { isSubmitting },
   } = useForm<FormInput>({
     defaultValues: {
-      issue: [],
+      issues: [],
     },
   });
 
   const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
-    if (!data.issue || data.issue.length === 0) {
+    if (!data.issues || data.issues.length === 0) {
       setToastAlert({
         title: "Error",
         type: "error",
@@ -120,7 +120,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
                 <form>
                   <Controller
                     control={control}
-                    name="issue"
+                    name="issues"
                     render={({ field }) => (
                       <Combobox as="div" {...field} multiple>
                         <div className="relative m-1">

apps/app/components/project/cycles/stats-view/single-stat.tsx

@@ -63,7 +63,7 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
 
   return (
     <>
-      <div className="bg-white p-3">
+      <div className="border bg-white p-3 rounded-md">
         <div className="grid grid-cols-8 gap-2 divide-x">
           <div className="col-span-3 space-y-3">
             <div className="flex justify-between items-center gap-2">
@@ -74,7 +74,15 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
               </Link>
               <div className="flex items-center gap-2">
                 <div className="flex items-center gap-2">
-                  <span className="text-xs bg-gray-100 px-2 py-1 rounded-xl">
+                  <span
+                    className={`text-xs border px-3 py-0.5 rounded-xl ${
+                      today < startDate
+                        ? "text-orange-500 border-orange-500"
+                        : today > endDate
+                        ? "text-red-500 border-red-500"
+                        : "text-green-500 border-green-500"
+                    }`}
+                  >
                     {today < startDate ? "Not started" : today > endDate ? "Over" : "Active"}
                   </span>
                 </div>
@@ -86,20 +94,19 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
                 </CustomMenu>
               </div>
             </div>
-
+            <div className="grid grid-cols-3 gap-x-2 gap-y-3 text-xs">
-            <div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
               <div className="flex items-center gap-2 text-gray-500">
                 <CalendarDaysIcon className="h-4 w-4" />
                 Cycle dates
               </div>
-              <div>
+              <div className="col-span-2">
                 {renderShortNumericDateFormat(startDate)} - {renderShortNumericDateFormat(endDate)}
               </div>
               <div className="flex items-center gap-2 text-gray-500">
                 <UserIcon className="h-4 w-4" />
                 Created by
               </div>
-              <div className="flex items-center gap-2">
+              <div className="col-span-2 flex items-center gap-2">
                 {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
                   <Image
                     src={cycle.owned_by.avatar}
@@ -119,7 +126,7 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
                 <CalendarDaysIcon className="h-4 w-4" />
                 Active members
               </div>
-              <div></div>
+              <div className="col-span-2"></div>
             </div>
             <div className="flex items-center gap-2">
               <Button theme="secondary" className="flex items-center gap-2" disabled>

apps/app/components/project/issues/create-update-issue-modal/index.tsx

@@ -118,7 +118,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
     if (!activeWorkspace || !activeProject) return;
     await issuesServices
       .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
-        issue: [issueId],
+        issues: [issueId],
       })
       .then((res) => {
         mutate(CYCLE_ISSUES(cycleId));

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx

@@ -101,7 +101,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
     if (activeWorkspace && activeProject && issueDetail)
       issuesServices
         .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
-          issue: [issueDetail.id],
+          issues: [issueDetail.id],
         })
         .then(() => {
           submitChanges({});
@@ -211,7 +211,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
               watch={watchIssue}
             />
             <SelectBlocked
-              submitChanges={submitChanges}
+              issueDetail={issueDetail}
               issuesList={issues?.results.filter((i) => i.id !== issueDetail?.id) ?? []}
               watch={watchIssue}
             />
@@ -227,6 +227,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
                   render={({ field: { value, onChange } }) => (
                     <input
                       type="date"
+                      id="issueDate"
                       value={value ?? ""}
                       onChange={(e: any) => {
                         submitChanges({ target_date: e.target.value });

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx

@@ -128,7 +128,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
                     leaveFrom="transform opacity-100 scale-100"
                     leaveTo="transform opacity-0 scale-95"
                   >
-                    <Listbox.Options className="absolute z-10 right-0 mt-1 w-auto bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
+                    <Listbox.Options className="absolute z-10 right-0 mt-1 w-auto bg-white shadow-lg max-h-48 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
                       <div className="py-1">
                         {people ? (
                           people.length > 0 ? (

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocked.tsx

@@ -10,32 +10,28 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "ui";
 // icons
-import {
+import { FolderIcon, MagnifyingGlassIcon, FlagIcon, XMarkIcon } from "@heroicons/react/24/outline";
-  FolderIcon,
-  MagnifyingGlassIcon,
-  UserGroupIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 // types
-import { IIssue } from "types";
+import { IIssue, IssueResponse } from "types";
 // constants
 import { classNames } from "constants/common";
+import issuesService from "lib/services/issues.service";
 
 type FormInput = {
   issue_ids: string[];
 };
 
 type Props = {
-  submitChanges: (formData: Partial<IIssue>) => void;
+  issueDetail: IIssue | undefined;
   issuesList: IIssue[];
   watch: UseFormWatch<IIssue>;
 };
 
-const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) => {
+const SelectBlocked: React.FC<Props> = ({ issueDetail, issuesList, watch }) => {
   const [query, setQuery] = useState("");
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
-  const { activeProject, issues } = useUser();
+  const { activeWorkspace, activeProject, issues, mutateIssues } = useUser();
   const { setToastAlert } = useToast();
 
   const { register, handleSubmit, reset, watch: watchIssues } = useForm<FormInput>();
@@ -54,16 +50,73 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
       });
       return;
     }
-    const newBlocked = [...watch("blocked_list"), ...data.issue_ids];
+
-    submitChanges({ blocked_list: newBlocked });
+    data.issue_ids.map((issue) => {
-    handleClose();
+      if (!activeWorkspace || !activeProject || !issueDetail) return;
+
+      const currentBlockers =
+        issues?.results
+          .find((i) => i.id === issue)
+          ?.blocker_issues.map((b) => b.blocker_issue_detail?.id ?? "") ?? [];
+
+      issuesService
+        .patchIssue(activeWorkspace.slug, activeProject.id, issue, {
+          blockers_list: [...currentBlockers, issueDetail.id],
+        })
+        .then((response) => {
+          mutateIssues((prevData) => ({
+            ...(prevData as IssueResponse),
+            results: (prevData?.results ?? []).map((issue) => {
+              if (issue.id === issueDetail.id) {
+                return { ...issue, ...response };
+              }
+              return issue;
+            }),
+          }));
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    });
+
+    // handleClose();
+  };
+
+  const removeBlocked = (issueId: string) => {
+    if (!activeWorkspace || !activeProject || !issueDetail) return;
+
+    const currentBlockers =
+      issues?.results
+        .find((i) => i.id === issueId)
+        ?.blocker_issues.map((b) => b.blocker_issue_detail?.id ?? "") ?? [];
+
+    const updatedBlockers = currentBlockers.filter((b) => b !== issueDetail.id);
+
+    issuesService
+      .patchIssue(activeWorkspace.slug, activeProject.id, issueId, {
+        blockers_list: updatedBlockers,
+      })
+      .then((response) => {
+        mutateIssues((prevData) => ({
+          ...(prevData as IssueResponse),
+          results: (prevData?.results ?? []).map((issue) => {
+            if (issue.id === issueDetail.id) {
+              return { ...issue, ...response };
+            }
+            return issue;
+          }),
+        }));
+      })
+      .catch((error) => {
+        console.log(error);
+      });
   };
 
   return (
     <div className="flex items-start py-2 flex-wrap">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-        <UserGroupIcon className="flex-shrink-0 h-4 w-4" />
+        <FlagIcon className="flex-shrink-0 h-4 w-4" />
-        <p>Blocked issues</p>
+        <p>Blocked by</p>
       </div>
       <div className="sm:basis-1/2 space-y-1">
         <div className="flex gap-1 flex-wrap">
@@ -71,13 +124,8 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
             ? watch("blocked_list").map((issue) => (
                 <span
                   key={issue}
-                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
+                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1.5 py-0.5 text-red-500 hover:bg-red-50 border-red-500 cursor-pointer"
-                  onClick={() => {
+                  onClick={() => removeBlocked(issue)}
-                    const updatedBlockers = watch("blocked_list").filter((i) => i !== issue);
-                    submitChanges({
-                      blocked_list: updatedBlockers,
-                    });
-                  }}
                 >
                   {`${activeProject?.identifier}-${
                     issues?.results.find((i) => i.id === issue)?.sequence_id
@@ -145,7 +193,10 @@ const SelectBlocked: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                               )}
                               <ul className="text-sm text-gray-700">
                                 {issuesList.map((issue) => {
-                                  if (!watch("blocked_list").includes(issue.id)) {
+                                  if (
+                                    !watch("blocked_list").includes(issue.id) &&
+                                    !watch("blockers_list").includes(issue.id)
+                                  ) {
                                     return (
                                       <Combobox.Option
                                         key={issue.id}

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-blocker.tsx

@@ -10,12 +10,7 @@ import { Combobox, Dialog, Transition } from "@headlessui/react";
 // ui
 import { Button } from "ui";
 // icons
-import {
+import { FlagIcon, FolderIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
-  FolderIcon,
-  MagnifyingGlassIcon,
-  UserGroupIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
 // types
 import { IIssue } from "types";
 // constants
@@ -62,8 +57,8 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
   return (
     <div className="flex items-start py-2 flex-wrap">
       <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-        <UserGroupIcon className="flex-shrink-0 h-4 w-4" />
+        <FlagIcon className="flex-shrink-0 h-4 w-4" />
-        <p>Blocker issues</p>
+        <p>Blocking</p>
       </div>
       <div className="sm:basis-1/2 space-y-1">
         <div className="flex gap-1 flex-wrap">
@@ -71,7 +66,7 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
             ? watch("blockers_list").map((issue) => (
                 <span
                   key={issue}
-                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1 py-0.5 hover:bg-red-50 hover:border-red-500 cursor-pointer"
+                  className="group flex items-center gap-1 border rounded-2xl text-xs px-1.5 py-0.5 text-yellow-500 hover:bg-yellow-50 border-yellow-500 cursor-pointer"
                   onClick={() => {
                     const updatedBlockers = watch("blockers_list").filter((i) => i !== issue);
                     submitChanges({
@@ -145,7 +140,10 @@ const SelectBlocker: React.FC<Props> = ({ submitChanges, issuesList, watch }) =>
                               )}
                               <ul className="text-sm text-gray-700">
                                 {issuesList.map((issue) => {
-                                  if (!watch("blockers_list").includes(issue.id)) {
+                                  if (
+                                    !watch("blockers_list").includes(issue.id) &&
+                                    !watch("blocked_list").includes(issue.id)
+                                  ) {
                                     return (
                                       <Combobox.Option
                                         key={issue.id}

apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-priority.tsx

@@ -12,6 +12,7 @@ import { IIssue } from "types";
 import { classNames } from "constants/common";
 import { PRIORITIES } from "constants/";
 import CustomSelect from "ui/custom-select";
+import { getPriorityIcon } from "constants/global";
 
 type Props = {
   control: Control<IIssue, any>;
@@ -33,7 +34,18 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => {
           render={({ field: { value } }) => (
             <CustomSelect
               label={
-                <span className={classNames(value ? "" : "text-gray-900", "text-left capitalize")}>
+                <span
+                  className={classNames(
+                    value ? "" : "text-gray-900",
+                    "text-left capitalize flex items-center gap-2"
+                  )}
+                >
+                  {getPriorityIcon(
+                    watch("priority") && watch("priority") !== ""
+                      ? watch("priority") ?? ""
+                      : "None",
+                    "text-sm"
+                  )}
                   {watch("priority") && watch("priority") !== "" ? watch("priority") : "None"}
                 </span>
               }
@@ -44,7 +56,10 @@ const SelectPriority: React.FC<Props> = ({ control, submitChanges, watch }) => {
             >
               {PRIORITIES.map((option) => (
                 <CustomSelect.Option key={option} value={option} className="capitalize">
+                  <>
+                    {getPriorityIcon(option, "text-sm")}
                     {option}
+                  </>
                 </CustomSelect.Option>
               ))}
             </CustomSelect>

apps/app/components/project/issues/list-view/index.tsx

@@ -8,7 +8,7 @@ import useSWR from "swr";
 // headless ui
 import { Disclosure, Listbox, Menu, Transition } from "@headlessui/react";
 // ui
-import { Spinner } from "ui";
+import { CustomMenu, Spinner } from "ui";
 // icons
 import {
   ChevronDownIcon,
@@ -483,18 +483,8 @@ const ListView: React.FC<Props> = ({
                                       )}
                                     </Listbox>
                                   )}
-                                  <Menu as="div" className="relative">
+                                  <CustomMenu ellipsis>
-                                    <Menu.Button
+                                    <CustomMenu.MenuItem
-                                      as="button"
-                                      className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none`}
-                                    >
-                                      <EllipsisHorizontalIcon className="h-4 w-4" />
-                                    </Menu.Button>
-                                    <Menu.Items className="absolute origin-top-right right-0.5 mt-1 p-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                                      <Menu.Item>
-                                        <button
-                                          type="button"
-                                          className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
                                       onClick={() => {
                                         setSelectedIssue({
                                           ...issue,
@@ -503,23 +493,15 @@ const ListView: React.FC<Props> = ({
                                       }}
                                     >
                                       Edit
-                                        </button>
+                                    </CustomMenu.MenuItem>
-                                      </Menu.Item>
+                                    <CustomMenu.MenuItem
-                                      <Menu.Item>
-                                        <div className="hover:bg-gray-100 border-b last:border-0">
-                                          <button
-                                            type="button"
-                                            className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
                                       onClick={() => {
                                         handleDeleteIssue(issue.id);
                                       }}
                                     >
                                       Delete permanently
-                                          </button>
+                                    </CustomMenu.MenuItem>
-                                        </div>
+                                  </CustomMenu>
-                                      </Menu.Item>
-                                    </Menu.Items>
-                                  </Menu>
                                 </div>
                               </div>
                             );

apps/app/constants/global.tsx

@@ -1,12 +1,18 @@
-export const getPriorityIcon = (priority: string) => {
+export const getPriorityIcon = (priority: string, className: string) => {
   switch (priority) {
     case "urgent":
-      return <span className="material-symbols-rounded">signal_cellular_alt</span>;
+      return <span className={`material-symbols-rounded ${className}`}>error</span>;
     case "high":
-      return <span className="material-symbols-rounded">signal_cellular_alt_2_bar</span>;
+      return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
     case "medium":
-      return <span className="material-symbols-rounded">signal_cellular_alt_1_bar</span>;
+      return (
+        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
+      );
+    case "low":
+      return (
+        <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
+      );
     default:
-      return <span>N/A</span>;
+      return null;
   }
 };

apps/app/lib/services/issues.service.ts

@@ -92,7 +92,7 @@ class ProjectIssuesServices extends APIService {
     projectId: string,
     cycleId: string,
     data: {
-      issue: string[];
+      issues: string[];
     }
   ) {
     return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)

apps/app/pages/invitations.tsx

@@ -90,47 +90,7 @@ const OnBoard: NextPage = () => {
         <div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
           {invitations && workspaces ? (
             invitations.length > 0 ? (
-              <div className="mt-3 sm:mt-5">
+              <div>
-                <div className="mt-2">
-                  <h2 className="text-2xl font-medium mb-4">Join your workspaces</h2>
-                  <div className="space-y-2 mb-12">
-                    {invitations.map((item) => (
-                      <div
-                        className="relative flex items-center border px-4 py-2 rounded"
-                        key={item.id}
-                      >
-                        <div className="ml-3 text-sm flex flex-col items-start w-full">
-                          <h3 className="font-medium text-xl text-gray-700">
-                            {item.workspace.name}
-                          </h3>
-                          <p className="text-sm">invited by {item.workspace.owner.first_name}</p>
-                        </div>
-                        <div className="flex gap-x-2 h-5 items-center">
-                          <div className="h-full flex items-center gap-x-1">
-                            <input
-                              id={`${item.id}`}
-                              aria-describedby="workspaces"
-                              name={`${item.id}`}
-                              checked={invitationsRespond.includes(item.id)}
-                              value={item.workspace.name}
-                              onChange={() => {
-                                handleInvitation(
-                                  item,
-                                  invitationsRespond.includes(item.id) ? "withdraw" : "accepted"
-                                );
-                              }}
-                              type="checkbox"
-                              className="h-4 w-4 rounded border-gray-300 text-theme focus:ring-indigo-500"
-                            />
-                            <label htmlFor={item.id} className="text-sm">
-                              Accept
-                            </label>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
                 <h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
                 <p className="mt-1 text-sm text-gray-500">
                   Select invites that you want to accept.

apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx

@@ -176,7 +176,7 @@ const SingleCycle: React.FC = () => {
         .then((res) => {
           issuesServices
             .addIssueToCycle(activeWorkspace.slug, activeProject.id, destination.droppableId, {
-              issue: [result.draggableId.split(",")[1]],
+              issues: [result.draggableId.split(",")[1]],
             })
             .then((res) => {
               console.log(res);

apps/app/pages/projects/[projectId]/issues/[issueId].tsx

@@ -34,7 +34,7 @@ import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deleti
 import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
 import IssueActivitySection from "components/project/issues/issue-detail/activity";
 // ui
-import { Spinner, TextArea, HeaderButton, Breadcrumbs, BreadcrumbItem } from "ui";
+import { Spinner, TextArea, HeaderButton, Breadcrumbs, BreadcrumbItem, CustomMenu } from "ui";
 // icons
 import {
   ChevronLeftIcon,
@@ -215,6 +215,8 @@ const IssueDetail: NextPage = () => {
     }
   };
 
+  console.log("Issue detail", issueDetail);
+
   return (
     <AppLayout
       noPadding={true}
@@ -531,12 +533,12 @@ const IssueDetail: NextPage = () => {
                       leaveFrom="transform opacity-100 scale-100"
                       leaveTo="transform opacity-0 scale-95"
                     >
-                      <Menu.Items className="absolute origin-top-right left-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
+                      <Menu.Items className="absolute origin-top-right left-0 mt-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10">
-                        <div className="p-1">
+                        <div className="py-1">
                           <Menu.Item as="div">
                             <button
                               type="button"
-                              className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
+                              className="text-left p-2 text-gray-900 hover:bg-indigo-50 text-xs whitespace-nowrap w-full"
                               onClick={() => {
                                 setIsOpen(true);
                                 setPreloadedData({
@@ -551,7 +553,7 @@ const IssueDetail: NextPage = () => {
                           <Menu.Item as="div">
                             <button
                               type="button"
-                              className="p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
+                              className="p-2 text-left text-gray-900 hover:bg-indigo-50 text-xs whitespace-nowrap"
                               onClick={() => {
                                 setIsAddAsSubIssueOpen(true);
                                 setPreloadedData({

apps/app/pages/projects/[projectId]/issues/index.tsx

@@ -208,7 +208,7 @@ const ProjectIssues: NextPage = () => {
                   leaveFrom="opacity-100 translate-y-0"
                   leaveTo="opacity-0 translate-y-1"
                 >
-                  <Popover.Panel className="absolute mr-5 right-1/2 z-10 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
+                  <Popover.Panel className="absolute mr-5 right-1/2 z-20 mt-1 w-screen max-w-xs translate-x-1/2 transform p-3 bg-white rounded-lg shadow-lg overflow-hidden">
                     <div className="relative flex flex-col gap-1 gap-y-4">
                       <div className="flex justify-between items-center">
                         <h4 className="text-sm text-gray-600">Group by</h4>