@lateralus-ai/shipping-ui 1.1.2 → 1.3.0

package/src/components/DocumentEditor/index.ts

@@ -0,0 +1 @@
+export { default as DocumentEditor } from "./DocumentEditor";

package/src/components/ModalPanel.tsx

@@ -31,6 +31,19 @@ const Header = ({
   );
 };
 
+interface BodyProps {
+  className?: string;
+}
+
+const Body = ({ children, className = "" }: PropsWithChildren<BodyProps>) => {
+  return (
+    <div className={`w-full overflow-auto ${className}`}>
+      {children}
+    </div>
+  );
+};
+
 export const ModalPanel = {
   Header,
+  Body,
 };

package/src/components/PdfViewer/ImageViewer.tsx

@@ -7,6 +7,7 @@ import { useZoom } from "./useZoom";
 import { useRotation } from "./useRotation";
 import { usePanning } from "./usePanning";
 import { usePageManagement } from "./usePageManagement";
+import { cn } from "../../utils/cn";
 
 interface ImageViewerProps {
   onClose: () => void;
@@ -16,24 +17,28 @@ interface ImageViewerProps {
 }
 
 export const ImageViewer = ({
+  className,
   onClose,
   totalPages,
   getImageSrc,
+  documentUrl,
   title = "PDF Viewer",
 }: ImageViewerProps) => {
   const [zoom, zoomActions] = useZoom();
   const [rotation, rotationActions] = useRotation();
   const [{ pan, isDragging }, panActions] = usePanning();
-  const [currentPage, pageActions] = usePageManagement(totalPages);
+  const [{ currentPage }, pageActions] = usePageManagement(totalPages);
 
   const rightButtons = (
     <IconButton variant="text" color="gray">
-      <ExpandIcon className="size-4" />
+      <a href={documentUrl} target="_blank" rel="noopener noreferrer">
+        <ExpandIcon className="size-4" />
+      </a>
     </IconButton>
   );
 
   return (
-    <div className="shadow rounded-t-lg">
+    <div className={cn("shadow rounded-t-lg flex flex-col h-full", className)}>
       <ModalPanel.Header onClose={onClose} right={rightButtons}>
         {title}
       </ModalPanel.Header>

package/src/components/PdfViewer/PdfViewer.tsx

@@ -1,11 +1,20 @@
-import { useRef } from "react";
-import { IconButton } from "@material-tailwind/react";
+import { IconButton, ButtonGroup, Tooltip } from "@material-tailwind/react";
+import { Document, Page, pdfjs } from "react-pdf";
 import { ModalPanel } from "../ModalPanel";
 import ExpandIcon from "../icons/ExpandIcon";
-import { useRefDimensions } from "./useRefDimensions";
+import { Icon } from "@iconify/react";
 import { cn } from "../../utils/cn";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import "react-pdf/dist/Page/TextLayer.css";
+import { useState, ChangeEvent, useMemo } from "react";
+import { useZoom } from "./useZoom";
+import { useRotation } from "./useRotation";
+import { usePageManagement } from "./usePageManagement";
+import { usePanning } from "./usePanning";
 
-interface PdfViewerProps {
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+
+interface PdfViewerProps extends React.HTMLProps<HTMLDivElement> {
   onClose: () => void;
   src: string;
   title?: string;
@@ -17,8 +26,11 @@ export const PdfViewer = ({
   title = "PDF Viewer",
   className,
 }: PdfViewerProps) => {
-  const containerRef = useRef(null);
-  const dimensions = useRefDimensions(containerRef);
+  const [zoom, zoomActions] = useZoom();
+  const [rotation, rotationActions] = useRotation();
+  const [{ currentPage, totalPages }, pageActions] = usePageManagement();
+  const [{ pan, isDragging }, panActions] = usePanning();
+
 
   const rightButtons = (
     <IconButton variant="text" color="gray">
@@ -34,21 +46,130 @@ export const PdfViewer = ({
         {title}
       </ModalPanel.Header>
 
-      <div className="flex-1 grid">
-        <div className="grid relative">
+      <div className="grid grow h-full overflow-hidden">
+        <div
+          className={cn(
+            "col-start-1 row-start-1 bg-gray-200 h-full overflow-hidden select-none p-8",
+            isDragging ? "cursor-grabbing" : "cursor-grab"
+          )}
+          onMouseDown={panActions.handleMouseDown}
+          onMouseMove={panActions.handleMouseMove}
+          onMouseUp={panActions.handleMouseUp}
+          onMouseLeave={panActions.handleMouseUp}
+          style={{
+            userSelect: 'none',
+          }}
+        >
           <div
-            ref={containerRef}
-            className="overflow-hidden col-start-1 row-start-1 bg-gray-200 h-full relative"
+            style={{
+              transform: `translate(${pan.x}px, ${pan.y}px)`,
+              transition: isDragging ? 'none' : 'transform 0.1s',
+              pointerEvents: 'none',
+            }}
           >
-            <embed
-              src={`${src}#view=FitH&navpanes=0&scrollbar=0`}
-              type="application/pdf"
-              width="100%"
-              height="100%"
-              style={{ border: "none" }}
-            />
+            <Document
+              file={src}
+              onLoadSuccess={({ numPages }) => {
+                pageActions.setTotalPages(numPages);
+              }}
+              scale={zoom / 100}
+              rotate={rotation}
+            >
+              <Page
+                pageNumber={currentPage}
+                renderTextLayer={true}
+                renderAnnotationLayer={true}
+              />
+            </Document>
           </div>
         </div>
+
+        <div className="col-start-1 row-start-1 self-end p-4 flex gap-2 justify-between w-full z-10">
+          <ButtonGroup className="divide-x-0 h-[52px]">
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={zoomActions.zoomOut}
+            >
+              <Icon icon="lucide:minus" />
+            </IconButton>
+            <Tooltip content="Click to reset zoom and pan">
+              <button
+                className="!bg-white text-center cursor-pointer w-[60px]"
+                onClick={() => {
+                  zoomActions.reset();
+                  panActions.reset();
+                }}
+              >
+                {zoom}%
+              </button>
+            </Tooltip>
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={zoomActions.zoomIn}
+            >
+              <Icon icon="lucide:plus" />
+            </IconButton>
+          </ButtonGroup>
+          <ButtonGroup className="divide-x-0 h-[52px]">
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={rotationActions.rotateClockwise}
+            >
+              <Icon icon="lucide:iteration-cw" />
+            </IconButton>
+
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={rotationActions.rotateCounterClockwise}
+            >
+              <Icon icon="lucide:iteration-ccw" />
+            </IconButton>
+          </ButtonGroup>
+          <ButtonGroup className="divide-x-0 ">
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={pageActions.prevPage}
+              disabled={currentPage === 1}
+            >
+              <Icon icon="lucide:chevron-left" />
+            </IconButton>
+            <input
+              className="bg-white pl-4 flex items-center w-[50px] text-center focus:outline-none w-[60px]"
+              value={currentPage}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                const page = parseInt(e.target.value);
+                if (!isNaN(page)) {
+                  pageActions.goToPage(page);
+                }
+              }}
+              type="number"
+              min="1"
+              max={totalPages}
+            />
+            <div className="flex items-center bg-white px-2">
+              of {totalPages}
+            </div>
+            <IconButton
+              variant="filled"
+              color="white"
+              className="py-[26px]"
+              onClick={pageActions.nextPage}
+              disabled={currentPage === totalPages}
+            >
+              <Icon icon="lucide:chevron-right" />
+            </IconButton>
+          </ButtonGroup>
+        </div>
       </div>
     </div>
   );

package/src/components/PdfViewer/usePageManagement.ts

@@ -1,14 +1,29 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 
-export const usePageManagement = (totalPages: number = 1) => {
+export const usePageManagement = (initialTotalPages: number = 0) => {
   const [currentPage, setCurrentPage] = useState<number>(1);
+  const [totalPages, setTotalPages] = useState<number>(initialTotalPages);
 
   const actions = {
-    nextPage: () => setCurrentPage((prev) => Math.min(prev + 1, totalPages)),
-    prevPage: () => setCurrentPage((prev) => Math.max(prev - 1, 1)),
-    goToPage: (page: number) =>
-      setCurrentPage(Math.max(1, Math.min(page, totalPages))),
+    nextPage: useCallback(() => {
+      setCurrentPage((prev) => {
+        return prev < totalPages ? prev + 1 : prev;
+      });
+    }, [totalPages]),
+    prevPage: useCallback(() => {
+      setCurrentPage((prev) => Math.max(prev - 1, 1));
+    }, []),
+    goToPage: useCallback(
+      (page: number) => {
+        setCurrentPage(() => Math.max(1, Math.min(page, totalPages)));
+      },
+      [totalPages],
+    ),
+    setTotalPages: useCallback((pages: number) => {
+      setTotalPages(pages);
+      setCurrentPage((prev) => Math.min(prev, pages));
+    }, []),
   };
 
-  return [currentPage, actions] as const;
+  return [{ currentPage, totalPages }, actions] as const;
 };

package/src/components/SearchModal.tsx

@@ -0,0 +1,320 @@
+import { Dialog, DialogBody } from "@material-tailwind/react";
+import { useEffect, useRef, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useMediaQuery } from "@uidotdev/usehooks";
+import { cn } from "../utils/cn";
+
+export const formatDateReport = (date: string | Date) => {
+  const formattedDate = new Date(date);
+  return formattedDate.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+};
+
+const highlightText = (text: string, searchTerm: string) => {
+  if (!searchTerm) return text;
+
+  const regex = new RegExp(`(\\b${searchTerm}\\b)`, "gi");
+  const parts = text.split(regex);
+  const firstMatchIndex = parts.findIndex((part) => regex.test(part));
+
+  if (firstMatchIndex === -1) return text;
+
+  if (firstMatchIndex === 0) {
+    return parts.map((part, i) =>
+      regex.test(part) ? (
+        <span key={i} className="text-gray-900 font-medium">
+          {part}
+        </span>
+      ) : (
+        part
+      ),
+    );
+  }
+
+  const matchedPart = parts[firstMatchIndex];
+  const beforeMatch = parts.slice(0, firstMatchIndex).join("");
+  const afterMatch = parts.slice(firstMatchIndex + 1).join("");
+
+  return (
+    <>
+      <span key="match" className="text-gray-900 font-medium">
+        {beforeMatch && <>...</>}
+        {matchedPart}
+      </span>
+      {afterMatch && <span key="after"> {afterMatch}</span>}
+    </>
+  );
+};
+
+export interface SearchItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  icon?: React.ReactNode;
+  metadata?: Record<string, any>;
+}
+
+export interface SearchModalProps {
+  open: boolean;
+  onClose: () => void;
+  items?: SearchItem[];
+  loading?: boolean;
+  placeholder?: string;
+  onSearch?: (query: string) => void;
+  onSelect?: (item: SearchItem) => void;
+  filterOptions?: string[];
+  selectedFilter?: string;
+  onFilterChange?: (filter: string) => void;
+  recentlyViewedLabel?: string;
+  noResultsText?: string;
+}
+
+const SearchFilters = ({
+  filters,
+  selected,
+  onChange,
+}: {
+  filters: string[];
+  selected: string;
+  onChange: (filter: string) => void;
+}) => {
+  return (
+    <div className="flex gap-2 px-2">
+      {filters.map((filter) => (
+        <button
+          key={filter}
+          onClick={() => onChange(filter)}
+          className={cn(
+            "px-3 py-1 text-sm rounded-full transition-colors",
+            selected === filter
+              ? "bg-brand-600 text-white"
+              : "bg-gray-100 text-gray-600 hover:bg-gray-200",
+          )}
+        >
+          {filter}
+        </button>
+      ))}
+    </div>
+  );
+};
+
+const SearchSkeleton = () => {
+  return (
+    <div className="p-4 flex flex-col gap-[6px]">
+      {[...Array(8)].map((_, i) => (
+        <div key={i} className="flex items-center gap-3 animate-pulse py-2">
+          <div className="size-3 bg-gray-100 rounded-full" />
+          <div className={cn(i % 2 === 0 ? "w-[250px]" : "w-[320px]","h-3 bg-gray-100 rounded-full")} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const SearchItemComponent = ({
+  item,
+  isActive,
+  onClick,
+  searchTerm,
+}: {
+  item: SearchItem;
+  isActive: boolean;
+  onClick: () => void;
+  searchTerm: string;
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "flex items-center gap-3 p-2 rounded-lg cursor-pointer transition-colors",
+        isActive ? "bg-gray-100" : "hover:bg-gray-50",
+      )}
+    >
+      {item.icon && <div className="shrink-0 text-gray-600">{item.icon}</div>}
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-gray-900 truncate">
+          {item.title}
+        </div>
+        {item.subtitle && (
+          <div className="text-sm text-gray-600 truncate">
+            {typeof item.subtitle === "string"
+              ? highlightText(item.subtitle, searchTerm)
+              : item.subtitle}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const SearchModal = ({
+  open,
+  onClose,
+  items = [],
+  loading = false,
+  placeholder = "Search...",
+  onSearch,
+  onSelect,
+  filterOptions = [],
+  selectedFilter = "All",
+  onFilterChange,
+  recentlyViewedLabel = "Recently viewed",
+  noResultsText = "No results found.",
+}: SearchModalProps) => {
+  const [searchValue, setSearchValue] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const isMobile = useMediaQuery("only screen and (max-width: 768px)");
+  const itemRefs = useRef<HTMLDivElement[]>([]);
+
+  useEffect(() => {
+    itemRefs.current = itemRefs.current.slice(0, items.length);
+  }, [items]);
+
+  useEffect(() => {
+    if (activeIndex > items.length) {
+      setActiveIndex(-1);
+    }
+  }, [items, activeIndex]);
+
+  useEffect(() => {
+    const currentItem = itemRefs.current[activeIndex];
+    currentItem?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+    });
+  }, [activeIndex]);
+
+  useHotkeys(
+    "ArrowUp",
+    () => {
+      if (items.length === 0) return;
+      setActiveIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: true,
+      enabled: open,
+    },
+  );
+
+  useHotkeys(
+    "ArrowDown",
+    () => {
+      if (items.length === 0) return;
+      setActiveIndex((prev) => (prev >= items.length - 1 ? 0 : prev + 1));
+    },
+    {
+      preventDefault: true,
+      enableOnFormTags: true,
+      enabled: open,
+    },
+  );
+
+  useHotkeys(
+    "Enter",
+    () => {
+      if (activeIndex >= 0 && activeIndex < items.length) {
+        handleItemSelect(items[activeIndex]);
+      }
+    },
+    {
+      enableOnFormTags: true,
+      preventDefault: true,
+      enabled: open,
+    },
+  );
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+    onSearch?.(value);
+  };
+
+  const handleItemSelect = (item: SearchItem) => {
+    onSelect?.(item);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setSearchValue("");
+    setActiveIndex(-1);
+    onClose();
+  };
+
+  const showFilters = filterOptions.length > 0 && searchValue;
+  const showRecentlyViewed = !searchValue && items.length > 0;
+
+  return (
+    <Dialog
+      open={open}
+      size="lg"
+      handler={handleClose}
+      className={cn(
+        isMobile && "w-screen m-0",
+        "focus:outline-none 2xl:min-w-px",
+      )}
+    >
+      <DialogBody className="relative px-0 py-2">
+        <div>
+          <div className="border-b border-b-gray-100 px-6 pb-2">
+            <input
+              type="text"
+              placeholder={placeholder}
+              value={searchValue}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              className="w-full bg-transparent p-2 px-0 text-sm font-medium text-gray-600 placeholder-gray-400 outline-none focus:outline-none"
+            />
+          </div>
+
+          {loading ? (
+            <SearchSkeleton />
+          ) : (
+            <div className="p-4 flex flex-col gap-2">
+              {showRecentlyViewed && (
+                <p className="text-sm font-normal text-gray-600 px-2">
+                  {recentlyViewedLabel}
+                </p>
+              )}
+
+              {showFilters && (
+                <SearchFilters
+                  filters={filterOptions}
+                  selected={selectedFilter}
+                  onChange={(filter) => onFilterChange?.(filter)}
+                />
+              )}
+
+              <div className="overflow-y-auto max-h-[320px]" tabIndex={0}>
+                {items.map((item, index) => (
+                  <div
+                    key={item.id}
+                    ref={(el) => {
+                      if (el) itemRefs.current[index] = el;
+                    }}
+                  >
+                    <SearchItemComponent
+                      item={item}
+                      isActive={activeIndex === index}
+                      onClick={() => handleItemSelect(item)}
+                      searchTerm={searchValue}
+                    />
+                  </div>
+                ))}
+
+                {!loading && items.length === 0 && (
+                  <div className="text-sm text-gray-900 font-medium">
+                    {noResultsText}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </DialogBody>
+    </Dialog>
+  );
+};
+
+export default SearchModal;

package/src/components/Tabs.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import "../styles/tabs.css";
+import {
+  Tabs,
+  TabPanel,
+  TabsBody,
+  TabsHeader,
+  Tab,
+} from "@material-tailwind/react";
+import { Icon } from "@iconify/react";
+import { cn } from "../utils/cn";
+import { SettingsIcon } from "./icons/SettingsIcon";
+
+interface Tab {
+  id: string;
+  label: string;
+  content: React.ReactNode;
+}
+
+interface TabsProps {
+  tabs: Tab[];
+  defaultTab?: string;
+}
+
+export const TabsContainer: React.FC<TabsProps> = () => {
+  return (
+    <Tabs className="w-[800px]">
+      <TabsHeader>
+        <Tab value="chats">Chats</Tab>
+        <Tab value="issues">Issues</Tab>
+
+        <button className="cursor-pointer mb-2 ml-auto rounded p-1 hover:bg-gray-100">
+          <SettingsIcon className="size-4" />
+        </button>
+      </TabsHeader>
+
+      <TabsBody>
+        <TabPanel value="chats">ChatsPanel</TabPanel>
+        <TabPanel value="issues">IssuesPanel</TabPanel>
+      </TabsBody>
+    </Tabs>
+  );
+};

package/src/components/icons/SettingsIcon.tsx

@@ -0,0 +1,33 @@
+export const SettingsIcon = ({ ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.16699 7.7334C4.91574 7.73357 6.33301 9.1516 6.33301 10.9004C6.33283 12.3905 5.30337 13.6386 3.91699 13.9756V15.25C3.91685 15.664 3.58098 15.9998 3.16699 16C2.75287 16 2.41713 15.6641 2.41699 15.25V13.9756C1.0303 13.6387 0.000177983 12.3906 0 10.9004C0 9.15149 1.41809 7.7334 3.16699 7.7334ZM3.16699 9.2334C2.24652 9.2334 1.5 9.97992 1.5 10.9004C1.50021 11.8207 2.24665 12.5664 3.16699 12.5664C4.08719 12.5662 4.8328 11.8206 4.83301 10.9004C4.83301 9.98002 4.08732 9.23357 3.16699 9.2334Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.8662 9.66699C12.2804 9.66699 12.6162 10.0028 12.6162 10.417V15.25C12.616 15.6641 12.2803 16 11.8662 16C11.4523 15.9998 11.1164 15.6639 11.1162 15.25V10.417C11.1162 10.0029 11.4522 9.66722 11.8662 9.66699Z"
+        fill="currentColor"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.8662 0C12.2804 0 12.6162 0.335786 12.6162 0.75V2.02344C14.0032 2.36025 15.0332 3.60999 15.0332 5.10059C15.0329 6.84904 13.6157 8.26633 11.8672 8.2666C10.1185 8.2666 8.70052 6.84921 8.7002 5.10059C8.7002 3.6104 9.7297 2.36066 11.1162 2.02344V0.75C11.1162 0.335929 11.4522 0.000230806 11.8662 0ZM11.8672 3.43359C10.9467 3.43359 10.2002 4.18011 10.2002 5.10059C10.2005 6.02078 10.9469 6.7666 11.8672 6.7666C12.7872 6.76633 13.5329 6.02062 13.5332 5.10059C13.5332 4.18028 12.7874 3.43387 11.8672 3.43359Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.16699 0C3.58107 0.000164881 3.91699 0.335888 3.91699 0.75V5.58301C3.91699 5.99712 3.58107 6.33284 3.16699 6.33301C2.75278 6.33301 2.41699 5.99722 2.41699 5.58301V0.75C2.41699 0.335786 2.75278 0 3.16699 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/components/index.ts

@@ -2,3 +2,5 @@ export * from "./HelloWorld";
 export * as InputPrompt from "./InputPrompt";
 export * as Sidebar from "./Sidebar";
 export * from "./PdfViewer/";
+export * from "./Tabs";
+export * from "./DocumentEditor";