ui: add card floater

frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx

@@ -3,7 +3,10 @@ import { useStore } from 'App/mstore';
 import WidgetWrapperNew from 'Components/Dashboard/components/WidgetWrapper/WidgetWrapperNew';
 import { Loader } from 'UI';
 import { observer } from 'mobx-react-lite';
-import AddCardSection from "../AddCardSection/AddCardSection";
+import AddCardSection from '../AddCardSection/AddCardSection';
+import cn from 'classnames';
+import { Button, Popover } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
 
 interface Props {
   siteId: string;
@@ -21,32 +24,51 @@ function DashboardWidgetGrid(props: Props) {
 
   return (
     <Loader loading={loading}>
-      {
-        list?.length === 0 ? (
-          <div className={'flex-1 flex justify-center items-center pt-10'} style={{ minHeight: 620 }}>
-            <AddCardSection />
-          </div>
-        ) : (
-          <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
-            {list?.map((item: any, index: any) => (
-              <React.Fragment key={item.widgetId}>
-                <WidgetWrapperNew
-                  index={index}
-                  widget={item}
-                  moveListItem={(dragIndex: any, hoverIndex: any) =>
-                    dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
-                  }
-                  dashboardId={dashboardId}
-                  siteId={siteId}
-                  grid="other"
-                  showMenu={true}
-                  isSaved={true}
-                />
-              </React.Fragment>
-            ))}
-          </div>
-        )
-      }
+      {list?.length === 0 ? (
+        <div
+          className={'flex-1 flex justify-center items-center pt-10'}
+          style={{ minHeight: 620 }}
+        >
+          <AddCardSection />
+        </div>
+      ) : (
+        <div
+          className="pb-10 px-4 pt-2 flex flex-col gap-2 rounded"
+          id={props.id}
+        >
+          {list?.map((item: any, index: any) => (
+            <div
+              key={item.widgetId}
+              className={cn('grid gap-4 grid-cols-4 items-start group relative px-6 py-2 hover:bg-active-blue w-full')}
+            >
+              <WidgetWrapperNew
+                index={index}
+                widget={item}
+                moveListItem={(dragIndex: any, hoverIndex: any) =>
+                  dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
+                }
+                dashboardId={dashboardId}
+                siteId={siteId}
+                grid="other"
+                showMenu={true}
+                isSaved={true}
+              />
+              <div
+                className={cn(
+                  'invisible group-hover:visible ',
+                  'absolute -left-2 top-1/2 -translate-y-1/2',
+                  // 'bg-white border shadow flex items-center p-1 rounded-full',
+                  // 'cursor-pointer'
+                )}
+              >
+                <Popover arrow={false} overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }} content={<AddCardSection fit inCards />} trigger={'click'}>
+                  <Button icon={<PlusOutlined size={14} />} shape={'circle'} size={'small'} />
+                </Popover>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </Loader>
   );
 }