From 7de12016750bb93e72424c99167bb95d09869277 Mon Sep 17 00:00:00 2001
From: vergiLgood1 <xdamazon17@gmail.com>
Date: Fri, 21 Feb 2025 18:50:04 +0700
Subject: [PATCH] add action search bar

---
 sigap-website/app/globals.css                 |  11 +
 .../app/protected/(admin-pages)/layout.tsx    |  35 ++-
 .../components/action-search-bar.tsx          | 234 ++++++++++++++++++
 sigap-website/components/inbox-drawer.tsx     |  19 +-
 sigap-website/components/ui/input.tsx         |   2 +-
 sigap-website/hooks/use-debounce.ts           |  20 ++
 sigap-website/package-lock.json               |  70 ++++++
 sigap-website/package.json                    |   2 +
 8 files changed, 371 insertions(+), 22 deletions(-)
 create mode 100644 sigap-website/components/action-search-bar.tsx
 create mode 100644 sigap-website/hooks/use-debounce.ts

diff --git a/sigap-website/app/globals.css b/sigap-website/app/globals.css
index d379bcb..373267a 100644
--- a/sigap-website/app/globals.css
+++ b/sigap-website/app/globals.css
@@ -83,3 +83,14 @@
     @apply bg-background text-foreground;
   }
 }
+
+
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/sigap-website/app/protected/(admin-pages)/layout.tsx b/sigap-website/app/protected/(admin-pages)/layout.tsx
index f533417..3c2785f 100644
--- a/sigap-website/app/protected/(admin-pages)/layout.tsx
+++ b/sigap-website/app/protected/(admin-pages)/layout.tsx
@@ -1,3 +1,4 @@
+import type React from "react";
 import { AppSidebar } from "@/components/app-sidebar";
 import {
   Breadcrumb,
@@ -8,7 +9,6 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
 import {
   SidebarInset,
   SidebarProvider,
@@ -20,9 +20,11 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { MoreHorizontal, MoreVertical } from "lucide-react";
+import { MoreHorizontal } from "lucide-react";
 import { InboxDrawer } from "@/components/inbox-drawer";
 import { ThemeSwitcher } from "@/components/theme-switcher";
+import ActionSearchBar from "@/components/action-search-bar";
+import { Separator } from "@/components/ui/separator";
 
 export default async function Layout({
   children,
@@ -33,24 +35,33 @@ export default async function Layout({
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center justify-between px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
-          <div className="flex items-center gap-2">
-            <SidebarTrigger className="-ml-1" />
+        {/* Navigation bar with SidebarTrigger and Breadcrumbs */}
+        <nav className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+          <div className="flex h-12 items-center px-4">
+            <SidebarTrigger className="" />
             <Separator orientation="vertical" className="mr-2 h-4" />
             <Breadcrumb>
               <BreadcrumbList>
-                <BreadcrumbItem className="hidden md:block">
-                  <BreadcrumbLink href="#">Sigap - v</BreadcrumbLink>
-                </BreadcrumbItem>
-                <BreadcrumbSeparator className="hidden md:block" />
                 <BreadcrumbItem>
-                  <BreadcrumbPage>Map</BreadcrumbPage>
+                  <BreadcrumbLink href="#">Crime Management</BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Crime Overview</BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>
             </Breadcrumb>
           </div>
+        </nav>
+
+        {/* Header with action bar and other controls */}
+        <header className="flex h-16 shrink-0 items-center justify-between border-b px-4 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="w-[300px]">
+            <ActionSearchBar />
+          </div>
+
           <div className="flex items-center gap-2">
-            <InboxDrawer showTitle={true} />
+            <InboxDrawer showTitle={true} showAvatar={false} />
             <ThemeSwitcher showTitle={true} />
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -71,4 +82,4 @@ export default async function Layout({
       </SidebarInset>
     </SidebarProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/sigap-website/components/action-search-bar.tsx b/sigap-website/components/action-search-bar.tsx
new file mode 100644
index 0000000..575e9b9
--- /dev/null
+++ b/sigap-website/components/action-search-bar.tsx
@@ -0,0 +1,234 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Input } from "@/components/ui/input"
+import { motion, AnimatePresence } from "framer-motion"
+import { Search, Send, BarChart2, Globe, Video, PlaneTakeoff, AudioLines } from "lucide-react"
+import useDebounce from "@/hooks/use-debounce"
+
+interface Action {
+  id: string
+  label: string
+  icon: React.ReactNode
+  description?: string
+  short?: string
+  end?: string
+}
+
+interface SearchResult {
+  actions: Action[]
+}
+
+const allActions = [
+  {
+    id: "1",
+    label: "Book tickets",
+    icon: <PlaneTakeoff className="h-4 w-4 text-blue-500" />,
+    description: "Operator",
+    short: "⌘K",
+    end: "Agent",
+  },
+  {
+    id: "2",
+    label: "Summarize",
+    icon: <BarChart2 className="h-4 w-4 text-orange-500" />,
+    description: "gpt-4o",
+    short: "⌘cmd+p",
+    end: "Command",
+  },
+  {
+    id: "3",
+    label: "Screen Studio",
+    icon: <Video className="h-4 w-4 text-purple-500" />,
+    description: "gpt-4o",
+    short: "",
+    end: "Application",
+  },
+  {
+    id: "4",
+    label: "Talk to Jarvis",
+    icon: <AudioLines className="h-4 w-4 text-green-500" />,
+    description: "gpt-4o voice",
+    short: "",
+    end: "Active",
+  },
+  {
+    id: "5",
+    label: "Translate",
+    icon: <Globe className="h-4 w-4 text-blue-500" />,
+    description: "gpt-4o",
+    short: "",
+    end: "Command",
+  },
+]
+
+function ActionSearchBar({ actions = allActions }: { actions?: Action[] }) {
+  const [query, setQuery] = useState("")
+  const [result, setResult] = useState<SearchResult | null>(null)
+  const [isFocused, setIsFocused] = useState(false)
+  const [isTyping, setIsTyping] = useState(false)
+  const [selectedAction, setSelectedAction] = useState<Action | null>(null)
+  const debouncedQuery = useDebounce(query, 200)
+
+  useEffect(() => {
+    if (!isFocused) {
+      setResult(null)
+      return
+    }
+
+    if (!debouncedQuery) {
+      setResult({ actions: allActions })
+      return
+    }
+
+    const normalizedQuery = debouncedQuery.toLowerCase().trim()
+    const filteredActions = allActions.filter((action) => {
+      const searchableText = action.label.toLowerCase()
+      return searchableText.includes(normalizedQuery)
+    })
+
+    setResult({ actions: filteredActions })
+  }, [debouncedQuery, isFocused])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value)
+    setIsTyping(true)
+  }
+
+  const container = {
+    hidden: { opacity: 0, height: 0 },
+    show: {
+      opacity: 1,
+      height: "auto",
+      transition: {
+        height: {
+          duration: 0.4,
+        },
+        staggerChildren: 0.1,
+      },
+    },
+    exit: {
+      opacity: 0,
+      height: 0,
+      transition: {
+        height: {
+          duration: 0.3,
+        },
+        opacity: {
+          duration: 0.2,
+        },
+      },
+    },
+  }
+
+  const item = {
+    hidden: { opacity: 0, y: 20 },
+    show: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.3,
+      },
+    },
+    exit: {
+      opacity: 0,
+      y: -10,
+      transition: {
+        duration: 0.2,
+      },
+    },
+  }
+
+  const handleFocus = () => {
+    setSelectedAction(null)
+    setIsFocused(true)
+  }
+
+  return (
+    <div className="relative w-full">
+      <div className="relative">
+        <Input
+          type="text"
+          placeholder="What's up?"
+          value={query}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={() => setTimeout(() => setIsFocused(false), 200)}
+          className="pl-3 pr-9 py-1.5 h-9 text-sm rounded-lg focus-visible:ring-offset-0"
+        />
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4">
+          <AnimatePresence mode="popLayout">
+            {query.length > 0 ? (
+              <motion.div
+                key="send"
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: 20, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Send className="w-4 h-4 text-gray-400 dark:text-gray-500" />
+              </motion.div>
+            ) : (
+              <motion.div
+                key="search"
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: 20, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Search className="w-4 h-4 text-gray-400 dark:text-gray-500" />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </div>
+
+      <AnimatePresence>
+        {isFocused && result && !selectedAction && (
+          <motion.div
+            className="absolute left-0 right-0 z-50 border rounded-md shadow-lg overflow-hidden dark:border-gray-800 bg-background mt-1"
+            variants={container}
+            initial="hidden"
+            animate="show"
+            exit="exit"
+          >
+            <motion.ul>
+              {result.actions.map((action) => (
+                <motion.li
+                  key={action.id}
+                  className="px-3 py-2 flex items-center justify-between hover:bg-accent hover:text-accent-foreground cursor-pointer"
+                  variants={item}
+                  layout
+                  onClick={() => setSelectedAction(action)}
+                >
+                  <div className="flex items-center gap-2 justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-gray-500">{action.icon}</span>
+                      <span className="text-sm font-medium">{action.label}</span>
+                      <span className="text-xs text-muted-foreground">{action.description}</span>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-muted-foreground">{action.short}</span>
+                    <span className="text-xs text-muted-foreground text-right">{action.end}</span>
+                  </div>
+                </motion.li>
+              ))}
+            </motion.ul>
+            <div className="mt-2 px-3 py-2 border-t border-border">
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>Press ⌘K to open commands</span>
+                <span>ESC to cancel</span>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  )
+}
+
+export default ActionSearchBar
+
diff --git a/sigap-website/components/inbox-drawer.tsx b/sigap-website/components/inbox-drawer.tsx
index 4e9a420..c5f06b0 100644
--- a/sigap-website/components/inbox-drawer.tsx
+++ b/sigap-website/components/inbox-drawer.tsx
@@ -95,6 +95,7 @@ const sampleMails: MailMessage[] = [
     date: "4 days ago",
     read: true,
   },
+
 ];
 
 const InboxDrawerComponent: React.FC<InboxDrawerProps> = ({
@@ -180,8 +181,8 @@ const InboxDrawerComponent: React.FC<InboxDrawerProps> = ({
                 {selectedMessage.subject}
               </h2>
               <div className="flex justify-between items-center mb-4">
-                {showAvatar && (
-                  <div className="flex items-center gap-3">
+                <div className="flex items-center gap-3">
+                  {/* {showAvatar && ( */}
                     <Avatar className="w-10 h-10">
                       <AvatarImage
                         src={`https://api.dicebear.com/6.x/initials/svg?seed=${selectedMessage.name}`}
@@ -195,14 +196,14 @@ const InboxDrawerComponent: React.FC<InboxDrawerProps> = ({
                           .toUpperCase()}
                       </AvatarFallback>
                     </Avatar>
-                    <div>
-                      <p className="font-medium">{selectedMessage.name}</p>
-                      <p className="text-sm text-muted-foreground">
-                        {selectedMessage.email}
-                      </p>
-                    </div>
+                  {/* )} */}
+                  <div>
+                    <p className="font-medium">{selectedMessage.name}</p>
+                    <p className="text-sm text-muted-foreground">
+                      {selectedMessage.email}
+                    </p>
                   </div>
-                )}
+                </div>
                 <p className="text-sm text-muted-foreground">
                   {selectedMessage.date}
                 </p>
diff --git a/sigap-website/components/ui/input.tsx b/sigap-website/components/ui/input.tsx
index 69b64fb..68551b9 100644
--- a/sigap-website/components/ui/input.tsx
+++ b/sigap-website/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/sigap-website/hooks/use-debounce.ts b/sigap-website/hooks/use-debounce.ts
new file mode 100644
index 0000000..24061cc
--- /dev/null
+++ b/sigap-website/hooks/use-debounce.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react"
+
+function useDebounce<T>(value: T, delay = 500): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
+
+export default useDebounce
+
diff --git a/sigap-website/package-lock.json b/sigap-website/package-lock.json
index 4ebb40b..6f5fb23 100644
--- a/sigap-website/package-lock.json
+++ b/sigap-website/package-lock.json
@@ -31,9 +31,11 @@
         "autoprefixer": "10.4.20",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.4.7",
         "input-otp": "^1.4.2",
         "lucide-react": "^0.468.0",
         "mapbox-gl": "^3.10.0",
+        "motion": "^12.4.7",
         "next": "latest",
         "next-themes": "^0.4.3",
         "prettier": "^3.3.3",
@@ -4305,6 +4307,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz",
+      "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.4.5",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4990,6 +5019,47 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/motion": {
+      "version": "12.4.7",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.4.7.tgz",
+      "integrity": "sha512-mhegHAbf1r80fr+ytC6OkjKvIUegRNXKLWNPrCN2+GnixlNSPwT03FtKqp9oDny1kNcLWZvwbmEr+JqVryFrcg==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.4.7",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.4.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz",
+      "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/sigap-website/package.json b/sigap-website/package.json
index c5f0348..8e66e20 100644
--- a/sigap-website/package.json
+++ b/sigap-website/package.json
@@ -32,9 +32,11 @@
     "autoprefixer": "10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.4.7",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.468.0",
     "mapbox-gl": "^3.10.0",
+    "motion": "^12.4.7",
     "next": "latest",
     "next-themes": "^0.4.3",
     "prettier": "^3.3.3",