Merge branch 'main' of http://git.sepehrdata.com/Saeed0920/inogen

app/components/dashboard/project-management/digital-innovation-page.tsx

@@ -12,7 +12,6 @@ import {
   Zap,
 } from "lucide-react";
 import moment from "moment-jalaali";
-import { formatNumber } from "~/lib/utils";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { Badge } from "~/components/ui/badge";
@@ -35,7 +34,7 @@ import {
   TableRow,
 } from "~/components/ui/table";
 import apiService from "~/lib/api";
-import { formatCurrency } from "~/lib/utils";
+import { formatCurrency, formatNumber } from "~/lib/utils";
 import { DashboardLayout } from "../layout";
 
 moment.loadPersian({ usePersianDigits: true });
@@ -370,7 +369,8 @@ export function DigitalInnovationPage() {
     const scrollContainer = scrollContainerRef.current;
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
+      if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current)
+        return;
 
       // Clear previous timeout
       if (scrollTimeoutRef.current) {
@@ -390,7 +390,9 @@ export function DigitalInnovationPage() {
     };
 
     if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
+      scrollContainer.addEventListener("scroll", handleScroll, {
+        passive: true,
+      });
     }
 
     return () => {
@@ -452,14 +454,12 @@ export function DigitalInnovationPage() {
         innovation_digital_function: {},
       });
 
-
-
       // let payload: DigitalInnovationMetrics = raw?.data;
       // console.log("*-*-*-*" +payload);
       // if (typeof payload === "string") {
       //   try {
       //     payload = JSON.parse(payload).innovation_digital_function;
-          
+
       //   } catch {}
       // }
 
@@ -469,10 +469,10 @@ export function DigitalInnovationPage() {
         try {
           // مرحله اول: data رو از string به object تبدیل کن
           const parsedData = JSON.parse(raw.data);
-  
+
           // مرحله دوم: innovation_digital_function رو که خودش string هست parse کن
           const arr = JSON.parse(parsedData.innovation_digital_function);
-  
+
           // مرحله سوم: اولین خانه آرایه رو بردار
           if (Array.isArray(arr) && arr.length > 0) {
             payload = arr[0];
@@ -482,8 +482,6 @@ export function DigitalInnovationPage() {
         }
       }
 
-
-
       const parseNum = (v: unknown): number => {
         if (v == null) return 0;
         if (typeof v === "number") return v;
@@ -601,7 +599,7 @@ export function DigitalInnovationPage() {
             variant="ghost"
             size="sm"
             onClick={() => handleProjectDetails(item)}
-            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto cursor-pointer"
+            className="text-pr-green hover:text-emerald-300 underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
           >
             جزئیات بیشتر
           </Button>
@@ -955,7 +953,7 @@ export function DigitalInnovationPage() {
               شرح پروژه
             </DialogTitle>
           </DialogHeader>
-          <div className="body grid grid-cols-[40%_20%_40%]">
+          <div className="body grid grid-cols-[40%_20%_40%] pb-6">
             <div className="border-l-2 border-l-gray-600 px-6">
               <span className="title text-lg font-bold">
                 {dialogInfo?.title}
@@ -1070,7 +1068,7 @@ export function DigitalInnovationPage() {
                 </div>
               </div>
             </div>
-            <div className="flex flex-col pr-7 gap-4">
+            <div className="flex flex-col px-6 gap-4">
               <div className="costBoard mx-auto w-full">
                 <div className="board o border border-gray-600 rounded-xl overflow-hidden flex flex-col">
                   <span className="title bg-[#3F415A]  text-white w-full p-2.5 pr-4 ">

app/components/dashboard/project-management/process-innovation-page.tsx

@@ -15,8 +15,9 @@ import moment from "moment-jalaali";
 import { useCallback, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { Badge } from "~/components/ui/badge";
-import { Button } from "~/components/ui/button";
 import { BaseCard } from "~/components/ui/base-card";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
 import { Checkbox } from "~/components/ui/checkbox";
 import { CustomBarChart } from "~/components/ui/custom-bar-chart";
 import {
@@ -36,7 +37,6 @@ import {
 import apiService from "~/lib/api";
 import { formatNumber } from "~/lib/utils";
 import { DashboardLayout } from "../layout";
-import { Card  , CardContent} from "~/components/ui/card";
 
 moment.loadPersian({ usePersianDigits: true });
 interface ProcessInnovationData {
@@ -176,7 +176,7 @@ export function ProcessInnovationPage() {
         stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum
       ),
       description: "دلار کاهش یافته",
-      icon: DollarSign ,
+      icon: DollarSign,
       color: "text-emerald-400",
     },
     frequentfailuresreduction: {
@@ -551,7 +551,11 @@ export function ProcessInnovationPage() {
           </Badge>
         );
       case "title":
-        return <span className="font-normal text-sm text-white">{String(value)}</span>;
+        return (
+          <span className="font-normal text-sm text-white">
+            {String(value)}
+          </span>
+        );
       case "project_status":
         return (
           <div className="flex items-center gap-1">
@@ -567,7 +571,10 @@ export function ProcessInnovationPage() {
         );
       case "project_rating":
         return (
-          <Badge variant="outline" className="text-base font-semibold text-center border-none">
+          <Badge
+            variant="outline"
+            className="text-base font-semibold text-center border-none"
+          >
             {formatNumber(String(value))}
           </Badge>
         );
@@ -595,7 +602,10 @@ export function ProcessInnovationPage() {
               {loading || statsLoading
                 ? // Loading skeleton for stats cards - matching new design
                   Array.from({ length: 4 }).map((_, index) => (
-                    <BaseCard key={`skeleton-${index}`} className="rounded-2xl overflow-hidden">
+                    <BaseCard
+                      key={`skeleton-${index}`}
+                      className="rounded-2xl overflow-hidden"
+                    >
                       <div className="flex flex-col justify-between gap-2">
                         <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
                           <div
@@ -621,7 +631,10 @@ export function ProcessInnovationPage() {
                   ))
                 : Object.entries(stateCard).map(([key, card]) => {
                     // map percent values for each card key
-                    const percentMap: Record<string, number | string | undefined> = {
+                    const percentMap: Record<
+                      string,
+                      number | string | undefined
+                    > = {
                       productionstopsprevention: stats.percentProductionStops,
                       bottleneckremoval: stats.percentBottleneckRemoval,
                       currencyreduction: stats.percentCurrencyReduction,
@@ -640,7 +653,7 @@ export function ProcessInnovationPage() {
                           <div className="flex items-center gap-4">
                             <div className="text-center">
                               <p className="text-3xl text-pr-green font-bold mb-1">
-                                {(card.value)}
+                                {card.value}
                               </p>
                               <div className="text-[11px] text-[#ACACAC] font-light font-persian">
                                 {card.description}
@@ -846,10 +859,12 @@ export function ProcessInnovationPage() {
               شرح پروژه
             </DialogTitle>
           </DialogHeader>
-          <div className="space-y-4 flex justify-between text-right px-6">
+          <div className="space-y-4 flex justify-between text-right p-6">
             {/* Project Description */}
             <div className="flex-[4] border-l-2 border-gray-600">
-              <h2 className="font-bold text-base">{selectedProjectDetails?.title}</h2>
+              <h2 className="font-bold text-base">
+                {selectedProjectDetails?.title}
+              </h2>
               <p className="text-white font-normal text-base font-persian px-2 mt-2">
                 {selectedProjectDetails?.project_description || "-"}
               </p>

app/components/dashboard/sidebar.tsx

@@ -1,25 +1,13 @@
 import {
-  Box,
-  Building2,
   ChevronDown,
-  ChevronRight,
-  FolderKanban,
   GalleryVerticalEnd,
-  Globe,
+  House,
-  LayoutDashboard,
+  LightbulbIcon,
-  Leaf,
+  ListTodo,
-  Lightbulb,
   LogOut,
-  MonitorSmartphone,
+  Radar,
-  Package,
   Settings,
   Star,
-  Workflow,
-  DiscAlbum,
-  House,
-  ListTodo,
-  LightbulbIcon,
-  Radar
 } from "lucide-react";
 import React, { useState } from "react";
 import { Link, useLocation } from "react-router";
@@ -49,7 +37,6 @@ interface MenuItem {
 }
 
 const menuItems: MenuItem[] = [
-
   {
     id: "dashboard",
     label: "صفحه اصلی",
@@ -123,7 +110,6 @@ const menuItems: MenuItem[] = [
     icon: null,
     href: "#", // This is not a route, it opens a popup
   },
-
 ];
 
 const bottomMenuItems: MenuItem[] = [
@@ -172,7 +158,10 @@ export function Sidebar({
       // Update header title based on current route
       // If a child route is active, use that child's label prefixed by parent label
       let activeTitle: string | undefined = undefined;
-      let activeIcon: React.ComponentType<{ className?: string }> | null | undefined = undefined;
+      let activeIcon:
+        | React.ComponentType<{ className?: string }>
+        | null
+        | undefined = undefined;
       menuItems.forEach((item) => {
         if (item.children) {
           const activeChild = item.children.find(
@@ -190,7 +179,10 @@ export function Sidebar({
         }
       });
       if (onTitleChange) {
-        onTitleChange({ title: activeTitle ?? "صفحه اول", icon: activeIcon ?? null });
+        onTitleChange({
+          title: activeTitle ?? "صفحه اول",
+          icon: activeIcon ?? null,
+        });
       }
     };
 
@@ -261,7 +253,7 @@ export function Sidebar({
         <button
           key={item.id}
           className={cn(
-            "flex items-center justify-center  w-full px-2 rounded-none mt-4 transition-all duration-200 group",
+            "flex items-center justify-center  w-full px-2 rounded-none mt-4 transition-all duration-200 group"
           )}
           onClick={handleClick}
         >
@@ -271,8 +263,7 @@ export function Sidebar({
             </span>
           </div>
         </button>
-      )
+      );
-
     }
 
     return (
@@ -331,10 +322,10 @@ export function Sidebar({
               "w-full text-right",
               // Disable pointer cursor when child is active (cannot collapse)
               item.children &&
-              item.children.some(
+                item.children.some(
-                (child) => child.href && location.pathname === child.href
+                  (child) => child.href && location.pathname === child.href
-              ) &&
+                ) &&
-              "cursor-not-allowed"
+                "cursor-not-allowed"
             )}
             onClick={handleClick}
           >
@@ -435,7 +426,7 @@ export function Sidebar({
               />
               <div className="font-persian">
                 <div className="text-sm font-semibold text-white">
-                داشبورد مدیریت فناوری و نوآوری                
+                  داشبورد مدیریت فناوری و نوآوری
                 </div>
                 {/* <div className="text-xs text-gray-400">نسخه ۰.۱</div> */}
               </div>

app/components/dashboard/strategic-alignment-popup.tsx

@@ -1,25 +1,25 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useReducer, useState } from "react";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "~/components/ui/dialog";
-import {
-  BarChart,
   Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  LabelList,
+  ResponsiveContainer,
   XAxis,
   YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-  LabelList,
-  Cell,
 } from "recharts";
-import apiService from "~/lib/api";
+import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog";
 import { Skeleton } from "~/components/ui/skeleton";
+import apiService from "~/lib/api";
 import { formatNumber } from "~/lib/utils";
 import { ChartContainer } from "../ui/chart";
+import {
+  DropdownMenu,
+  DropdownMenuButton,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "../ui/dropdown-menu";
 import { TruncatedText } from "../ui/truncatedText";
 
 interface StrategicAlignmentData {
@@ -28,6 +28,51 @@ interface StrategicAlignmentData {
   percentage?: number;
 }
 
+interface DropDownConfig {
+  isOpen: boolean;
+  selectedValue: string;
+  dropDownItems: Array<string>;
+}
+
+type Action =
+  | { type: "OPEN" }
+  | { type: "CLOSE" }
+  | { type: "SETVALUE"; value: Array<string> }
+  | { type: "SELECT"; value: string };
+
+// const DropDownItems = [
+//   {
+//     id: 0,
+//     key: "همه مضامین",
+//     Value: "همه مضامین",
+//   },
+//   {
+//     id: 1,
+//     key: "ارزش های هم افزایی نوآورانه",
+//     Value: "همه مضامین",
+//   },
+//   {
+//     id: 2,
+//     key: "ارزش های خودکفایی نوآوورانه",
+//     Value: "همه مضامین",
+//   },
+//   {
+//     id: 3,
+//     key: "ارزش های فناوری های نوین",
+//     Value: "همه مضامین",
+//   },
+//   {
+//     id: 4,
+//     key: "ارزش های توسعه منابع انسانی",
+//     Value: "همه مضامین",
+//   },
+//   {
+//     id: 5,
+//     key: "ارزش های نوآوری سبز",
+//     Value: "همه مضامین",
+//   },
+// ];
+
 interface StrategicAlignmentPopupProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -41,11 +86,10 @@ const chartConfig = {
   },
 };
 
-  const maxHeight = 150;
+const maxHeight = 150;
-  const barHeights =  () => Math.floor(Math.random() * maxHeight);
+const barHeights = () => Math.floor(Math.random() * maxHeight);
 
 const ChartSkeleton = () => (
-
   <div className="flex justify-center h-96 w-full p-4">
     {/* Chart bars */}
     <div className=" w-full flex items-end gap-10">
@@ -58,7 +102,7 @@ const ChartSkeleton = () => (
         </div>
       ))}
     </div>
-       {/* Left space for Y-axis label */}
+    {/* Left space for Y-axis label */}
     <div className="flex flex-col justify-between mr-2">
       <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
       <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
@@ -74,6 +118,11 @@ export function StrategicAlignmentPopup({
 }: StrategicAlignmentPopupProps) {
   const [data, setData] = useState<StrategicAlignmentData[]>([]);
   const [loading, setLoading] = useState(false);
+  const [state, dispatch] = useReducer(reducer, {
+    isOpen: false,
+    selectedValue: "همه مضامین",
+    dropDownItems: [],
+  });
 
   useEffect(() => {
     if (open) {
@@ -98,29 +147,12 @@ export function StrategicAlignmentPopup({
           ? JSON.parse(response.data)
           : response.data;
 
-      const processedData = responseData
+      setBarItems(responseData);
-        .map((item: any) => ({
+      const dropDownItems = responseData.map(
-          strategic_theme: item.strategic_theme || "N/A",
+        (item: any) => item.strategic_theme
-          operational_fee_sum: Math.max(0, Number(item.operational_fee_sum)),
-        }))
-        .filter((item: StrategicAlignmentData) => item.strategic_theme !== "");
-
-      const total = processedData.reduce(
-        (acc: number, item: StrategicAlignmentData) =>
-          acc + item.operational_fee_sum,
-        0
       );
 
-      const dataWithPercentage = processedData.map(
+      setDropDownValues(["همه مضامین", ...dropDownItems]);
-        (item: StrategicAlignmentData) => ({
-          ...item,
-          percentage:
-            total > 0
-              ? Math.round((item.operational_fee_sum / total) * 100)
-              : 0,
-        })
-      );
-      setData(dataWithPercentage || []);
     } catch (error) {
       console.error("Error fetching strategic alignment data:", error);
     } finally {
@@ -128,19 +160,135 @@ export function StrategicAlignmentPopup({
     }
   };
 
+  const fetchDropDownItems = async (item: string) => {
+    try {
+      if (item !== "همه مضامین") {
+        const response = await apiService.select({
+          ProcessName: "project",
+          OutputFields: [
+            "value_technology_and_innovation",
+            "sum(operational_fee)",
+          ],
+          Conditions: [["strategic_theme", "=", item]],
+          GroupBy: ["value_technology_and_innovation"],
+        });
+
+        const responseData =
+          typeof response.data === "string"
+            ? JSON.parse(response.data)
+            : response.data;
+        setBarItems(responseData);
+      } else fetchData();
+    } catch (error) {
+      console.error("Error fetching strategic alignment data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  function reducer(state: DropDownConfig, action: Action): DropDownConfig {
+    switch (action.type) {
+      case "OPEN":
+        return { ...state, isOpen: true };
+      case "CLOSE":
+        return { ...state, isOpen: false };
+      case "SETVALUE":
+        return { ...state, dropDownItems: action.value };
+      case "SELECT":
+        return { ...state, selectedValue: action.value };
+      default:
+        return state;
+    }
+  }
+
+  const toggleMenuHandler = () => {
+    dispatch({
+      type: "OPEN",
+    });
+  };
+
+  const selectItem = (item: string) => {
+    dispatch({
+      type: "SELECT",
+      value: item,
+    });
+
+    dispatch({
+      type: "CLOSE",
+    });
+
+    fetchDropDownItems(item);
+  };
+
+  const setDropDownValues = (items: Array<string>) => {
+    dispatch({
+      type: "SETVALUE",
+      value: items,
+    });
+  };
+
+  const setBarItems = (responseData: any) => {
+    const processedData = responseData
+      .map((item: any) => ({
+        strategic_theme:
+          item.strategic_theme || item.value_technology_and_innovation || "N/A",
+        operational_fee_sum: Math.max(0, Number(item.operational_fee_sum)),
+      }))
+      .filter((item: StrategicAlignmentData) => item.strategic_theme !== "");
+
+    const total = processedData.reduce(
+      (acc: number, item: StrategicAlignmentData) =>
+        acc + item.operational_fee_sum,
+      0
+    );
+
+    const dataWithPercentage = processedData.map(
+      (item: StrategicAlignmentData) => ({
+        ...item,
+        percentage:
+          total > 0 ? Math.round((item.operational_fee_sum / total) * 100) : 0,
+      })
+    );
+    setData(dataWithPercentage || []);
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-4xl bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] text-white border-none">
-        <DialogHeader className="mb-10 py-2 w-full pb-4  border-b-2 border-gray-500/20">
+        <DialogHeader className="mb-10  w-full   border-b-2 border-gray-500/20">
-          <DialogTitle className="ml-auto text-sm text-white ">میزان انطباق راهبردی</DialogTitle>
+          <div>
+            <div className="flex">
+              <DropdownMenu
+                modal={true}
+                open={state.isOpen}
+                onOpenChange={toggleMenuHandler}
+              >
+                <DropdownMenuButton>{state.selectedValue}</DropdownMenuButton>
+
+                <DropdownMenuContent forceMount={true} className="w-56">
+                  {state.dropDownItems.map((item: string, key: number) => (
+                    <div
+                      onClick={() => selectItem(item)}
+                      key={`${key}-${item}`}
+                    >
+                      <DropdownMenuItem>{item}</DropdownMenuItem>
+                    </div>
+                  ))}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </div>
         </DialogHeader>
 
         {loading ? (
           <ChartSkeleton />
         ) : (
           <>
-            <ResponsiveContainer  width="100%" height={400}>
+            <ResponsiveContainer width="100%" height={400}>
-              <ChartContainer  config={chartConfig} className="aspect-auto h-96 w-full">
+              <ChartContainer
+                config={chartConfig}
+                className="aspect-auto h-96 w-full"
+              >
                 <BarChart
                   data={data}
                   margin={{ left: 12, right: 12 }}
@@ -149,7 +297,7 @@ export function StrategicAlignmentPopup({
                   accessibilityLayer
                 >
                   <CartesianGrid vertical={false} stroke="#475569" />
-               <XAxis
+                  <XAxis
                     dataKey="strategic_theme"
                     tickLine={false}
                     axisLine={false}
@@ -161,11 +309,8 @@ export function StrategicAlignmentPopup({
                       return (
                         <g transform={`translate(${x},${y})`}>
                           <foreignObject width={80} height={20} x={-45} y={0}>
-                          <TruncatedText
+                            <TruncatedText maxWords={2} text={payload.value} />
-                    maxWords={2}
+                          </foreignObject>
-                            text={payload.value}
-                            />
-                            </foreignObject>
                         </g>
                       );
                     }}
@@ -179,37 +324,38 @@ export function StrategicAlignmentPopup({
                     tickFormatter={(value) =>
                       `${formatNumber(Math.round(value))}`
                     }
-
+                    label={{
-
+                      value: "تعداد برنامه ها",
-                      label={{
+                      angle: -90,
-    value: "تعداد برنامه ها" ,
+                      position: "insideLeft",
-    angle: -90,
+                      fill: "#94a3b8",
-    position: "insideLeft",
+                      fontSize: 11,
-    fill: "#94a3b8",
+                      offset: 0,
-    fontSize: 11,
+                      dy: 0,
-    offset: 0,
+                      style: { textAnchor: "middle" },
-    dy: 0,
+                    }}
-    style: { textAnchor: "middle" },
-  }}
                   />
 
-                  <Bar   dataKey="percentage" radius={[8, 8, 0, 0]}>
+                  <Bar dataKey="percentage" radius={[8, 8, 0, 0]}>
                     {data.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={chartConfig.percentage.color} />
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={chartConfig.percentage.color}
+                      />
                     ))}
                     <LabelList
                       dataKey="percentage"
                       position="top"
-                            offset={15}
+                      offset={15}
-
                       style={{
                         fill: "#ffffff",
                         fontSize: "16px",
                         fontWeight: "bold",
                       }}
-                      formatter={(v: number) => `${formatNumber(Math.round(v))}`}
+                      formatter={(v: number) =>
+                        `${formatNumber(Math.round(v))}`
+                      }
                     />
-
                   </Bar>
                 </BarChart>
               </ChartContainer>

app/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react";
-import { X } from "lucide-react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -38,7 +38,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
@@ -50,8 +50,8 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
+));
-DialogContent.displayName = DialogPrimitive.Content.displayName
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
   className,
@@ -59,13 +59,13 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col p-4 space-y-1.5 text-center sm:text-left",
       className
     )}
     {...props}
   />
-)
+);
-DialogHeader.displayName = "DialogHeader"
+DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
   className,
@@ -78,8 +78,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-)
+);
-DialogFooter.displayName = "DialogFooter"
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -93,8 +93,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,18 +105,18 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
-}
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

app/components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronDown, Circle } from "lucide-react";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -34,11 +34,10 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -52,9 +51,9 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,32 +64,32 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden mt-1 rounded-xl border border-gray-500 bg-pr-gray p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
+));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "cursor-pointer select-none  rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-gray-600  data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
     {...props}
   />
-))
+));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -112,9 +111,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -135,13 +134,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
+));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -153,8 +152,8 @@ const DropdownMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -165,8 +164,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
+));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -177,24 +176,43 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
+  );
-}
+};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+const DropdownMenuButton = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex items-center justify-between gap-2  text-sm outline-none border border-gray-500 p-3  rounded-xl min-w-50 max-w-72 group",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronDown className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
+  </DropdownMenuPrimitive.Trigger>
+));
+DropdownMenuButton.displayName = "DropdownMenuButton";
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
+  DropdownMenuButton,
-  DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
-}
+};