Merge pull request #542 from Enterprise-CMCS/responsive-table

restyle(dash): Make Table Responsive

src/services/ui/src/components/Dialog/index.tsx

@@ -21,8 +21,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      "fixed inset-0 z-40 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
     )}
     {...props}
   />
@@ -41,7 +41,7 @@ const DialogContent = React.forwardRef<
       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",
-        className
+        className,
       )}
       {...props}
     >
@@ -64,7 +64,7 @@ const DialogHeader = ({
   <div
     className={cn(
       "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      className,
     )}
     {...props}
   />
@@ -80,7 +80,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -97,7 +97,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

src/services/ui/src/components/Inputs/calendar.tsx

@@ -16,12 +16,13 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        months:
+          "hidden sm:flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
         month: "space-y-4",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
         nav_button_next: "absolute right-1",
@@ -33,7 +34,7 @@ function Calendar({
         cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
-          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
         ),
         vhidden: "hidden",
         caption_dropdowns: "flex flex-row justify-center",
@@ -58,7 +59,7 @@ function Calendar({
               <select
                 className={cn(
                   "absolute left-0 w-auto h-auto opacity-0 cursor-pointer",
-                  className
+                  className,
                 )}
                 {...props}
               />

src/services/ui/src/components/Inputs/date-picker.tsx

@@ -23,7 +23,7 @@ export const DatePicker = ({ date, onChange }: DatePickerProps) => {
           variant={"outline"}
           className={cn(
             "w-[280px] justify-start text-left font-normal",
-            !date && "text-muted-foreground"
+            !date && "text-muted-foreground",
           )}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
@@ -41,7 +41,7 @@ export const DatePicker = ({ date, onChange }: DatePickerProps) => {
             setIsCalendarOpen(false);
           }}
           initialFocus
-        />  
+        />
       </PopoverContent>
     </Popover>
   );

src/services/ui/src/components/Layout/index.tsx

@@ -92,7 +92,7 @@ const UserDropdownMenu = () => {
       <DropdownMenu.Portal>
         <DropdownMenu.Content
           align="start"
-          className="bg-white flex flex-col gap-4 px-10 py-4 shadow-md rounded-b-sm"
+          className="bg-white z-50 flex flex-col gap-4 px-10 py-4 shadow-md rounded-b-sm "
         >
           <DropdownMenu.Item className="flex">
             <button
@@ -249,8 +249,8 @@ const ResponsiveNav = ({ isDesktop }: ResponsiveNavProps) => {
     <>
       <div className="flex-1"></div>
       {isOpen && (
-        <div className="w-full fixed top-[100px] left-0 z-50">
-          <ul className="font-medium flex flex-col p-4 md:p-0 mt-2 gap-4 rounded-lg bg-accent">
+        <div className="w-full absolute top-[100px] sm:top-[85px] left-0 z-50">
+          <ul className="font-medium flex flex-col p-4 md:p-0 mt-2 gap-4 rounded-b-lg bg-primary">
             {links.map((link) => (
               <li key={link.link}>
                 <Link

src/services/ui/src/components/Opensearch/main/Filtering/Drawer/Filterable/DateRange.tsx

@@ -150,6 +150,37 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
     setToValue(format(today, "MM/dd/yyyy"));
   };
 
+  // Calendar props
+  const disableDates = [
+    { after: offsetFromUtc(new Date(getNextBusinessDayTimestamp())) },
+  ];
+
+  const onSelect = (d: any) => {
+    setSelectedDate(d);
+    if (!!d?.from && !!d.to) {
+      onChange(
+        offsetRangeToUtc({
+          gte: d.from.toISOString(),
+          lte: endOfDay(d.to).toISOString(),
+        }),
+      );
+      setFromValue(format(d.from, "MM/dd/yyyy"));
+      setToValue(format(d.to, "MM/dd/yyyy"));
+    } else if (!d?.from && !d?.to) {
+      onChange(
+        offsetRangeToUtc({
+          gte: "",
+          lte: "",
+        }),
+      );
+      setFromValue("");
+      setToValue("");
+    } else if (d?.from && !d?.to) {
+      setFromValue(format(d.from, "MM/dd/yyyy"));
+      onChange(offsetRangeToUtc(getDateRange(d.from, endOfDay(d.from))));
+    }
+  };
+
   const label = useMemo(() => {
     const from = selectedDate?.from
       ? format(selectedDate.from, "LLL dd, y")
@@ -177,51 +208,38 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
           </div>
         </PopoverTrigger>
         <PopoverContent
-          className="w-auto p-0"
+          className="min-w-fit lg:w-auto p-0"
           align="start"
           side="left"
           sideOffset={1}
         >
-          <Calendar
-            disabled={[
-              { after: offsetFromUtc(new Date(getNextBusinessDayTimestamp())) },
-            ]}
-            initialFocus
-            mode="range"
-            defaultMonth={selectedDate?.from}
-            selected={selectedDate}
-            numberOfMonths={2}
-            className="bg-white"
-            onSelect={(d) => {
-              setSelectedDate(d);
-              if (!!d?.from && !!d.to) {
-                onChange(
-                  offsetRangeToUtc({
-                    gte: d.from.toISOString(),
-                    lte: endOfDay(d.to).toISOString(),
-                  }),
-                );
-                setFromValue(format(d.from, "MM/dd/yyyy"));
-                setToValue(format(d.to, "MM/dd/yyyy"));
-              } else if (!d?.from && !d?.to) {
-                onChange(
-                  offsetRangeToUtc({
-                    gte: "",
-                    lte: "",
-                  }),
-                );
-                setFromValue("");
-                setToValue("");
-              } else if (d?.from && !d?.to) {
-                setFromValue(format(d.from, "MM/dd/yyyy"));
-                onChange(
-                  offsetRangeToUtc(getDateRange(d.from, endOfDay(d.from))),
-                );
-              }
-            }}
-            {...props}
-          />
-          <div className="flex flex-row gap-4 w-[320px] p-2 m-auto">
+          <div className="hidden lg:block">
+            <Calendar
+              disabled={disableDates}
+              initialFocus
+              mode="range"
+              defaultMonth={selectedDate?.from}
+              selected={selectedDate}
+              numberOfMonths={2}
+              className="bg-white"
+              onSelect={onSelect}
+              {...props}
+            />
+          </div>
+          <div className="lg:hidden flex align-center">
+            <Calendar
+              disabled={disableDates}
+              initialFocus
+              mode="range"
+              defaultMonth={selectedDate?.from}
+              selected={selectedDate}
+              numberOfMonths={1}
+              className="bg-white"
+              onSelect={onSelect}
+              {...props}
+            />
+          </div>
+          <div className="flex flex-row gap-2 lg:gap-4 w-min-[300px] lg:w-[320px] p-2 m-auto">
             <Input
               onChange={onFromInput}
               value={fromValue}
@@ -236,15 +254,36 @@ export function FilterableDateRange({ value, onChange, ...props }: Props) {
               className="text-md"
             />
           </div>
-          <div className="flex gap-4 p-2 ml-4">
-            <Button onClick={() => setPresetRange("today")}>Today</Button>
-            <Button onClick={() => setPresetRange("week")}>Last 7 Days</Button>
-            <Button onClick={() => setPresetRange("month")}>
-              Month To Date
-            </Button>
-            <Button onClick={() => setPresetRange("quarter")}>
-              Quarter To Date
-            </Button>
+          <div className="flex w-full flex-wrap lg:flex-row p-1">
+            <div className="w-1/2 lg:w-1/4 p-1">
+              <Button
+                className="w-full"
+                onClick={() => setPresetRange("today")}
+              >
+                Today
+              </Button>
+            </div>
+            <div className="w-1/2 lg:w-1/4 p-1">
+              <Button className="w-full" onClick={() => setPresetRange("week")}>
+                Last 7 Days
+              </Button>
+            </div>
+            <div className="w-1/2 lg:w-1/4 p-1">
+              <Button
+                className="w-full"
+                onClick={() => setPresetRange("month")}
+              >
+                Month To Date
+              </Button>
+            </div>
+            <div className="w-1/2 lg:w-1/4 p-1">
+              <Button
+                className="w-full"
+                onClick={() => setPresetRange("quarter")}
+              >
+                Quarter To Date
+              </Button>
+            </div>
           </div>
         </PopoverContent>
       </Popover>

src/services/ui/src/components/Opensearch/main/Filtering/Drawer/index.tsx

@@ -27,7 +27,7 @@ export const OsFilterDrawer = () => {
       <SheetTrigger asChild>
         <Button
           variant="outline"
-          className="hover:bg-transparent self-center h-10 flex gap-2"
+          className="hover:bg-transparent w-full xs:w-fit self-center h-10 flex gap-2"
         >
           <FilterIcon className="w-4 h-4" />
           <span className="prose-sm">Filters</span>

src/services/ui/src/components/Opensearch/main/Filtering/Export/index.tsx

@@ -58,7 +58,7 @@ export const OsExportData: FC<{
       variant="outline"
       onClick={handleExport}
       disabled={loading}
-      className="hover:bg-transparent self-center h-10 flex gap-2"
+      className="w-full xs:w-fit hover:bg-transparent self-center h-10 flex gap-2"
     >
       {loading && (
         <motion.div

src/services/ui/src/components/Opensearch/main/Filtering/index.tsx

@@ -13,11 +13,11 @@ export const OsFiltering: FC<{
   const context = useOsContext();
 
   return (
-    <div>
+    <div className="w-full my-2 max-w-screen-xl self-center">
       <p className="mb-1 text-sm">
         {"Search by Package ID, CPOC Name, or Submitter Name"}
       </p>
-      <div className="flex flex-row content-between gap-2 mb-4">
+      <div className="flex w-full md:flex-row flex-col flex-grow content-between gap-2 mb-4">
         <SearchForm
           isSearching={context.isLoading}
           handleSearch={(search) =>
@@ -29,7 +29,7 @@ export const OsFiltering: FC<{
           }
           disabled={!!props.disabled}
         />
-        <div className="flex flex-row gap-2">
+        <div className="flex justify-center flex-row gap-2">
           <OsExportData columns={props.columns} />
           <OsFilterDrawer />
         </div>

src/services/ui/src/components/Opensearch/main/Table/index.tsx

@@ -15,8 +15,8 @@ export const OsTable: FC<{
   const url = useOsUrl();
 
   return (
-    <UI.Table className="flex-1">
-      <UI.TableHeader className="sticky top-0 bg-white z-50">
+    <UI.Table className="overflow-scroll w-full">
+      <UI.TableHeader className="sticky top-0 bg-white">
         <UI.TableRow>
           <UI.TableHead
             className="w-[10px]"
@@ -53,7 +53,6 @@ export const OsTable: FC<{
           })}
         </UI.TableRow>
       </UI.TableHeader>
-
       <UI.TableBody>
         {/* TODO: Add a skeleton loader after discussing with HCD.
         See https://qmacbis.atlassian.net/browse/OY2-25623 */}

src/services/ui/src/components/Opensearch/main/index.tsx

@@ -17,7 +17,7 @@ export const OsMainView: FC<{
       ...COL,
       hidden: !!COL?.hidden,
       locked: COL?.locked ?? false,
-    }))
+    })),
   );
 
   const onToggle = (field: string) => {
@@ -30,7 +30,7 @@ export const OsMainView: FC<{
   };
 
   return (
-    <section className="flex flex-col h-[100vh]">
+    <section className="flex md:items-stretch items-center flex-col h-[100vh]">
       <OsFiltering columns={osColumns} />
       <OsTable onToggle={onToggle} columns={osColumns} />
       <Pagination

src/services/ui/src/components/Pagination/index.tsx

@@ -24,8 +24,9 @@ export const Pagination: FC<Props> = (props) => {
           Next
         </div>
       </div>
-      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
-        <div className="flex gap-6">
+      <div className="hidden sm:flex-col md:flex-row sm:flex sm:flex-1 items-center justify-between">
+        {/* Records per page ... 1-25 of xxxx records */}
+        <div className="flex gap-6 mb-5 md:mb-0">
           <p className="flex gap-2 text-sm text-gray-700" id="recordsLabel">
             Records per page:
             <select
@@ -47,6 +48,7 @@ export const Pagination: FC<Props> = (props) => {
             records
           </p>
         </div>
+        {/* < 1 ....n-1, n, n+1, .... x > */}
         <div>
           <nav
             className="isolate inline-flex -space-x-px rounded-md shadow-sm"
@@ -114,7 +116,7 @@ export const Pagination: FC<Props> = (props) => {
                       "text-white": isActive,
                       "hover:text-black": isActive,
                       "hover:bg-blue-700": isActive,
-                    }
+                    },
                   )}
                 >
                   {PAGE}

src/services/ui/src/components/SearchForm/index.tsx

@@ -49,7 +49,7 @@ export const SearchForm: FC<{
         <input
           id="searchInput"
           type="text"
-          className="w-[30rem] py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
+          className="w-full md:w-[30rem] py-3 pl-12 pr-4 text-gray-500 border border-gray-300 outline-none focus:bg-white focus:border-indigo-600"
           maxLength={28}
           value={searchText}
           onChange={handleInputChange}