From b2ea83393b6b2549005f3461e9e014d37d7e6121 Mon Sep 17 00:00:00 2001
From: Mohammed Faisal Hussain <faisalhussain7008@gmail.com>
Date: Tue, 31 Oct 2023 15:09:37 +0530
Subject: [PATCH 1/4] feat: enhanced sidepanel and added it to storybook

---
 .../sidepanel/Sidepanel.stories.tsx           | 114 ++++++++++++++++++
 dashboard/components/sidepanel/Sidepanel.tsx  |   2 +-
 .../components/sidepanel/SidepanelFooter.tsx  |  37 ++++++
 .../components/sidepanel/SidepanelHeader.tsx  |  77 ++++++++++--
 .../components/sidepanel/SidepanelPage.tsx    |   6 +-
 .../components/sidepanel/SidepanelTabs.tsx    |   5 +-
 6 files changed, 224 insertions(+), 17 deletions(-)
 create mode 100644 dashboard/components/sidepanel/Sidepanel.stories.tsx
 create mode 100644 dashboard/components/sidepanel/SidepanelFooter.tsx

diff --git a/dashboard/components/sidepanel/Sidepanel.stories.tsx b/dashboard/components/sidepanel/Sidepanel.stories.tsx
new file mode 100644
index 000000000..62b530a3f
--- /dev/null
+++ b/dashboard/components/sidepanel/Sidepanel.stories.tsx
@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from '@components/button/Button';
+import Sidepanel from './Sidepanel';
+import SidepanelHeader from './SidepanelHeader';
+import SidepanelTabs from './SidepanelTabs';
+import SidepanelPage from './SidepanelPage';
+import SidepanelFooter from './SidepanelFooter';
+
+type SidepanelProps = {
+  title: string;
+  subtitle?: string;
+  href?: string;
+  imgSrc?: string;
+  imgAlt?: string;
+  deleteLabel?: string;
+  saveLabel?: string;
+  tabs: string[];
+};
+
+function SidepanelWrapper({
+  title,
+  tabs,
+  saveLabel,
+  ...others
+}: SidepanelProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [page, setPage] = useState<string>('');
+
+  useEffect(() => {
+    if (tabs && tabs.length > 0) {
+      setPage(tabs[0]);
+    }
+  }, []);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const goTo = (newPage: string) => setPage(newPage);
+
+  return (
+    <div className="h-96">
+      <Button onClick={open}>Open Sidepanel</Button>
+      <Sidepanel isOpen={isOpen} closeModal={close}>
+        <SidepanelHeader
+          title={title}
+          goBack={close}
+          deleteAction={close}
+          closeModal={close}
+          {...others}
+        />
+        <SidepanelTabs goTo={goTo} page={page} tabs={tabs} />
+        {tabs &&
+          tabs.length > 0 &&
+          tabs?.map((tab: string) => (
+            <SidepanelPage key={tab} page={page} param={tab}>
+              <p>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                Tempora et officia tenetur est, minima veritatis doloremque
+                accusantium distinctio animi nulla reprehenderit quod asperiores
+                similique illum perferendis, reiciendis, ipsam doloribus sit!
+                Quidem amet veritatis ipsa omnis inventore architecto, assumenda
+                ad vero cupiditate pariatur natus nisi corporis. Nobis voluptas
+                vitae similique cupiditate deleniti. Inventore eos iusto porro
+                perspiciatis fugiat nam sequi eligendi voluptas autem. Vitae
+                beatae animi porro, fugiat eligendi hic cumque illum!
+                Consectetur culpa obcaecati dolore praesentium harum. Provident
+                nesciunt repudiandae eligendi quos, minima sed dolore veniam
+                consequatur delectus! Optio ratione cum dolor eaque
+                necessitatibus numquam maiores inventore asperiores quisquam
+                quidem?
+              </p>
+            </SidepanelPage>
+          ))}
+        <SidepanelFooter
+          saveLabel={saveLabel}
+          saveAction={close}
+          closeModal={close}
+        />
+      </Sidepanel>
+    </div>
+  );
+}
+
+const meta: Meta<typeof SidepanelWrapper> = {
+  title: 'Komiser/SidePanel',
+  component: SidepanelWrapper,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof SidepanelWrapper>;
+
+export const Primary: Story = {
+  args: {
+    title: 'Resource name',
+    tabs: ['tab 1', 'tab 2', 'tab 3'],
+    subtitle: 'service',
+    href: 'https://docs.komiser.io/',
+    imgSrc: '/assets/img/providers/aws.png',
+    imgAlt: 'komiser',
+    deleteLabel: 'delete',
+    saveLabel: 'Save changes'
+  }
+};
+
+export const Secondary: Story = {
+  args: {
+    title: 'Create new policy',
+    tabs: ['tab 1', 'tab 2', 'tab 3'],
+    deleteLabel: 'delete',
+    saveLabel: 'Save changes'
+  }
+};
diff --git a/dashboard/components/sidepanel/Sidepanel.tsx b/dashboard/components/sidepanel/Sidepanel.tsx
index 9daf0cbdf..52bbbbe0d 100644
--- a/dashboard/components/sidepanel/Sidepanel.tsx
+++ b/dashboard/components/sidepanel/Sidepanel.tsx
@@ -32,7 +32,7 @@ function Sidepanel({ isOpen, closeModal, children, noScroll }: SidepanelProps) {
             className="fixed inset-0 z-30 hidden animate-fade-in bg-black-900/10 opacity-0 sm:block"
           ></div>
           <div
-            className={`fixed inset-0 z-30 flex w-full animate-fade-in-up flex-col gap-4 overflow-auto bg-white p-4 opacity-0 shadow-2xl sm:bottom-4 sm:left-auto sm:right-4 sm:top-4 sm:w-[38rem] sm:animate-fade-in-left sm:rounded-lg ${
+            className={`fixed inset-0 z-30 flex w-full animate-fade-in-up flex-col gap-4 overflow-auto bg-white px-8 pt-4 opacity-0 shadow-2xl sm:bottom-4 sm:left-auto sm:right-4 sm:top-4 sm:w-[38rem] sm:animate-fade-in-left sm:rounded-lg ${
               noScroll ? 'overflow-hidden' : 'overflow-auto'
             }`}
           >
diff --git a/dashboard/components/sidepanel/SidepanelFooter.tsx b/dashboard/components/sidepanel/SidepanelFooter.tsx
new file mode 100644
index 000000000..1da7fee56
--- /dev/null
+++ b/dashboard/components/sidepanel/SidepanelFooter.tsx
@@ -0,0 +1,37 @@
+import Button from '@components/button/Button';
+
+export type SidepanelFooterProps = {
+  loading?: boolean;
+  closeModal: () => void;
+  saveAction: () => void;
+  saveLabel?: string;
+};
+
+function SidepanelFooter({
+  closeModal,
+  saveAction,
+  saveLabel,
+  loading
+}: SidepanelFooterProps) {
+  return (
+    <>
+      <div className="inline-flex w-full items-center justify-end rounded-bl-lg rounded-br-lg border-t border-gray-200 bg-white px-0 py-3">
+        <div className="flex shrink grow basis-0 items-center justify-end gap-6">
+          <Button size="md" style="ghost" onClick={closeModal}>
+            Cancel
+          </Button>
+          <Button
+            size="md"
+            type="submit"
+            loading={loading}
+            onClick={saveAction}
+          >
+            {saveLabel || 'Save'}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default SidepanelFooter;
diff --git a/dashboard/components/sidepanel/SidepanelHeader.tsx b/dashboard/components/sidepanel/SidepanelHeader.tsx
index 6d2bfd6bc..c4832ff06 100644
--- a/dashboard/components/sidepanel/SidepanelHeader.tsx
+++ b/dashboard/components/sidepanel/SidepanelHeader.tsx
@@ -1,32 +1,83 @@
+import { ReactNode } from 'react';
+import ArrowLeftIcon from '@components/icons/ArrowLeftIcon';
+import HyperLinkIcon from '@components/icons/HyperLinkIcon';
 import Button from '../button/Button';
 
-type SidepanelHeaderProps = {
+export type SidepanelHeaderProps = {
   title: string;
-  subtitle: string;
+  subtitle?: string;
+  href?: string;
+  imgSrc?: string;
+  imgAlt?: string;
+  children?: ReactNode;
   closeModal: () => void;
   deleteAction?: () => void;
+  goBack?: () => void;
   deleteLabel?: string;
 };
 
 function SidepanelHeader({
   title,
   subtitle,
+  href,
+  imgSrc,
+  imgAlt,
+  children,
   closeModal,
   deleteAction,
-  deleteLabel
+  deleteLabel,
+  goBack
 }: SidepanelHeaderProps) {
   return (
-    <div className="flex flex-wrap-reverse items-center justify-between gap-6 sm:flex-nowrap">
-      <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
-        <div className="flex flex-col gap-1 py-1">
-          <p className="... w-48 truncate font-medium text-black-900">
-            {title}
-          </p>
-          <p className="flex items-center gap-2 text-xs text-black-300">
-            {subtitle}
-          </p>
+    <div
+      className={`flex flex-wrap-reverse items-center justify-between gap-6 sm:flex-nowrap ${
+        subtitle && 'pt-2'
+      }`}
+    >
+      {title && subtitle && (
+        <div className="flex flex-wrap items-center gap-2 sm:flex-nowrap">
+          {imgSrc && (
+            <picture className="flex-shrink-0">
+              <img
+                src={imgSrc}
+                className="h-10 w-10 rounded-full"
+                alt={imgAlt}
+              />
+            </picture>
+          )}
+          <div className="flex flex-col gap-0.5">
+            <p className="font-['Noto Sans'] inline-flex w-48 items-center gap-2 truncate text-base font-medium leading-normal text-neutral-900">
+              {title}
+              <a
+                target="_blank"
+                href={href}
+                rel="noreferrer"
+                className="hover:text-primary"
+              >
+                <HyperLinkIcon />
+              </a>
+            </p>
+            <p className="font-['Noto Sans'] text-xs font-normal text-neutral-500">
+              {subtitle}
+            </p>
+          </div>
         </div>
-      </div>
+      )}
+
+      {title && !subtitle && (
+        <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
+          <button type="button" onClick={goBack}>
+            <ArrowLeftIcon className="h-6 w-6" />
+          </button>
+          <div className="flex flex-col gap-0.5">
+            <p className="font-['Noto Sans'] text-center text-xl font-semibold leading-loose text-neutral-900">
+              {title}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {children}
 
       <div className="flex flex-shrink-0 items-center gap-4">
         {deleteAction && (
diff --git a/dashboard/components/sidepanel/SidepanelPage.tsx b/dashboard/components/sidepanel/SidepanelPage.tsx
index c1571e72b..124fbe6e3 100644
--- a/dashboard/components/sidepanel/SidepanelPage.tsx
+++ b/dashboard/components/sidepanel/SidepanelPage.tsx
@@ -16,7 +16,11 @@ function SidepanelPage({
   return (
     <>
       {page === param && (
-        <div className={container ? 'rounded-lg bg-black-100 p-6' : ''}>
+        <div
+          className={
+            container ? 'rounded-lg bg-black-100 p-6' : ' h-full overflow-auto'
+          }
+        >
           <div className="flex flex-col gap-6">{children}</div>
         </div>
       )}
diff --git a/dashboard/components/sidepanel/SidepanelTabs.tsx b/dashboard/components/sidepanel/SidepanelTabs.tsx
index b1075a66f..453789fb4 100644
--- a/dashboard/components/sidepanel/SidepanelTabs.tsx
+++ b/dashboard/components/sidepanel/SidepanelTabs.tsx
@@ -1,4 +1,4 @@
-type SidepanelTabsProps = {
+export type SidepanelTabsProps = {
   goTo: (page: any) => void;
   page: string;
   tabs: string[];
@@ -19,7 +19,8 @@ function SidepanelTabs({ goTo, page, tabs }: SidepanelTabsProps) {
                          : 'border-transparent hover:text-komiser-700'
                      }`}
             >
-              {tab}
+              {tab.charAt(0).toUpperCase() + tab.slice(1).toLowerCase()}{' '}
+              {/* capitalize first letter */}
             </a>
           </li>
         ))}

From db951685a0db4fa235606b7b99b5d16732a0118a Mon Sep 17 00:00:00 2001
From: Mohammed Faisal Hussain <faisalhussain7008@gmail.com>
Date: Tue, 31 Oct 2023 15:11:11 +0530
Subject: [PATCH 2/4] feat: created pill component and its story

---
 dashboard/components/pill/Pill.mocks.tsx   | 48 ++++++++++++++++++
 dashboard/components/pill/Pill.stories.tsx | 57 +++++++++++++++++++++
 dashboard/components/pill/Pill.tsx         | 58 ++++++++++++++++++++++
 3 files changed, 163 insertions(+)
 create mode 100644 dashboard/components/pill/Pill.mocks.tsx
 create mode 100644 dashboard/components/pill/Pill.stories.tsx
 create mode 100644 dashboard/components/pill/Pill.tsx

diff --git a/dashboard/components/pill/Pill.mocks.tsx b/dashboard/components/pill/Pill.mocks.tsx
new file mode 100644
index 000000000..313f80ef3
--- /dev/null
+++ b/dashboard/components/pill/Pill.mocks.tsx
@@ -0,0 +1,48 @@
+import { PillProps } from './Pill';
+
+const active: PillProps = {
+  status: 'active',
+  children: 'active'
+};
+
+const pending: PillProps = {
+  status: 'pending',
+  children: 'pending'
+};
+
+const removed: PillProps = {
+  status: 'removed',
+  children: 'removed'
+};
+
+const inactive: PillProps = {
+  status: 'inactive',
+  children: 'inactive'
+};
+
+const info: PillProps = {
+  status: 'info',
+  children: 'info'
+};
+
+const latest: PillProps = {
+  status: 'new',
+  children: 'latest'
+};
+
+const highlight: PillProps = {
+  status: 'highlight',
+  children: 'highlight'
+};
+
+const mockPillProps = {
+  active,
+  pending,
+  removed,
+  inactive,
+  info,
+  latest,
+  highlight
+};
+
+export default mockPillProps;
diff --git a/dashboard/components/pill/Pill.stories.tsx b/dashboard/components/pill/Pill.stories.tsx
new file mode 100644
index 000000000..98c69ecd8
--- /dev/null
+++ b/dashboard/components/pill/Pill.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Pill from './Pill';
+import mockPillProps from './Pill.mocks';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof Pill> = {
+  title: 'Komiser/Pill',
+  component: Pill,
+  tags: ['autodocs'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Pill>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Active: Story = {
+  args: {
+    ...mockPillProps.active
+  }
+};
+
+export const Pending: Story = {
+  args: {
+    ...mockPillProps.pending
+  }
+};
+
+export const Removed: Story = {
+  args: {
+    ...mockPillProps.removed
+  }
+};
+
+export const Inactive: Story = {
+  args: {
+    ...mockPillProps.inactive
+  }
+};
+
+export const Info: Story = {
+  args: {
+    ...mockPillProps.info
+  }
+};
+
+export const Latest: Story = {
+  args: {
+    ...mockPillProps.latest
+  }
+};
+
+export const Highlight: Story = {
+  args: {
+    ...mockPillProps.highlight
+  }
+};
diff --git a/dashboard/components/pill/Pill.tsx b/dashboard/components/pill/Pill.tsx
new file mode 100644
index 000000000..90ee465f5
--- /dev/null
+++ b/dashboard/components/pill/Pill.tsx
@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+
+export type PillProps = {
+  status:
+    | 'active'
+    | 'pending'
+    | 'removed'
+    | 'inactive'
+    | 'info'
+    | 'new'
+    | 'highlight';
+  children: ReactNode; // Remove the quotes
+  textcase?: 'uppercase' | 'lowercase';
+};
+
+function Pill({ status, children, textcase = 'lowercase' }: PillProps) {
+  function handleBgColor() {
+    let color;
+
+    if (status === 'active') color = 'bg-green-100';
+    if (status === 'pending') color = 'bg-orange-100';
+    if (status === 'removed') color = 'bg-rose-100';
+    if (status === 'inactive') color = 'bg-zinc-100';
+    if (status === 'info') color = 'bg-blue-100';
+    if (status === 'new') color = 'bg-sky-100';
+    if (status === 'highlight') color = 'bg-violet-100';
+
+    return color;
+  }
+
+  function handleFontColor() {
+    let color;
+
+    if (status === 'active') color = 'text-green-400';
+    if (status === 'pending') color = 'text-orange-400';
+    if (status === 'removed') color = 'text-red-400';
+    if (status === 'inactive') color = 'text-zinc-400';
+    if (status === 'info') color = 'text-blue-500';
+    if (status === 'new') color = 'text-teal-600';
+    if (status === 'highlight') color = 'text-violet-600';
+
+    return color;
+  }
+
+  return (
+    <div
+      className={`inline-flex items-start justify-start gap-2.5 rounded-3xl px-1.5 pb-1 pt-0.5 ${handleBgColor()}`}
+    >
+      <p
+        className={`${handleFontColor()} font-sans text-xs font-normal ${textcase}`}
+      >
+        {children}
+      </p>
+    </div>
+  );
+}
+
+export default Pill;

From 204ff5ab56aeb81f397b5fa81e20f891c1fc92f8 Mon Sep 17 00:00:00 2001
From: Mohammed Faisal Hussain <faisalhussain7008@gmail.com>
Date: Tue, 31 Oct 2023 15:13:24 +0530
Subject: [PATCH 3/4] feat: display node details in side panel #1072

---
 .../components/explorer/DependencyGraph.tsx   |  59 +++++-
 dashboard/components/icons/HyperLinkIcon.tsx  |  22 +++
 .../components/InventorySidePanel.tsx         | 178 +++++++++++-------
 .../useInventory/types/useInventoryTypes.ts   |   3 +-
 .../hooks/useInventory/useInventory.tsx       |   4 +-
 dashboard/pages/inventory.tsx                 |   1 +
 dashboard/services/settingsService.ts         |  13 ++
 7 files changed, 210 insertions(+), 70 deletions(-)
 create mode 100644 dashboard/components/icons/HyperLinkIcon.tsx

diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
index 6b115e14e..336113065 100644
--- a/dashboard/components/explorer/DependencyGraph.tsx
+++ b/dashboard/components/explorer/DependencyGraph.tsx
@@ -16,6 +16,9 @@ import EmptyState from '@components/empty-state/EmptyState';
 
 import Tooltip from '@components/tooltip/Tooltip';
 import WarningIcon from '@components/icons/WarningIcon';
+import useInventory from '@components/inventory/hooks/useInventory/useInventory';
+import settingsService from '@services/settingsService';
+import InventorySidePanel from '@components/inventory/components/InventorySidePanel';
 import { ReactFlowData } from './hooks/useDependencyGraph';
 import {
   edgeAnimationConfig,
@@ -37,9 +40,38 @@ nodeHtmlLabel(Cytoscape.use(COSEBilkent));
 Cytoscape.use(popper);
 const DependencyGraph = ({ data }: DependencyGraphProps) => {
   const [initDone, setInitDone] = useState(false);
-
   const dataIsEmpty: boolean = data.nodes.length === 0;
 
+  const {
+    openModal,
+    isOpen,
+    closeModal,
+    data: inventoryItem,
+    page,
+    goTo,
+    tags,
+    handleChange,
+    addNewTag,
+    removeTag,
+    updateTags,
+    loading,
+    deleteLoading,
+    bulkItems,
+    updateBulkTags
+  } = useInventory();
+
+  // opens modal to display details of clicked node
+  const handleNodeClick = async (event: EventObject) => {
+    const nodeData = event.target.data();
+    settingsService.getResourceById(`?resourceId=${nodeData.id}`).then(res => {
+      if (res === Error) {
+        console.log('Error retrieving resource by id');
+      } else {
+        openModal(res);
+      }
+    });
+  };
+
   // Type technically is Cytoscape.EdgeCollection but that throws an unexpected error
   const loopAnimation = (eles: any) => {
     const ani = eles.animation(edgeAnimationConfig[0], edgeAnimationConfig[1]);
@@ -81,6 +113,8 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
       cy.nodes().roots().addClass('root');
       // Animate edges
       cy.edges().forEach(loopAnimation);
+      // Add a click event listener to the Cytoscape graph
+      cy.on('tap', 'node', handleNodeClick);
 
       // Add hover tooltip on edges
       cy.edges().bind('mouseover', event => {
@@ -141,12 +175,13 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
 
   return (
     <div className="relative h-full flex-1 bg-dependency-graph bg-[length:40px_40px]">
-      {/* <CytoscapeComponent
+      <CytoscapeComponent
         className="h-full w-full"
         elements={CytoscapeComponent.normalizeElements({
           nodes: data.nodes,
           edges: data.edges
         })}
+        // forEach={(data.nodes, node => {console.log(node)})}
         maxZoom={maxZoom}
         minZoom={minZoom}
         layout={graphLayoutConfig}
@@ -165,7 +200,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
           }
         ]}
         cy={(cy: Cytoscape.Core) => cyActionHandlers(cy)}
-      /> */}
+      />
       {dataIsEmpty ? (
         <>
           <div className="translate-y-[201px]">
@@ -216,6 +251,24 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
           </div>
         )}
       </div>
+      {/* Modal */}
+      <InventorySidePanel
+        isOpen={isOpen}
+        closeModal={closeModal}
+        data={inventoryItem}
+        goTo={goTo}
+        page={page}
+        updateTags={updateTags}
+        tags={tags}
+        tabs={['resource details', 'tags']}
+        handleChange={handleChange}
+        removeTag={removeTag}
+        addNewTag={addNewTag}
+        loading={loading}
+        deleteLoading={deleteLoading}
+        bulkItems={bulkItems}
+        updateBulkTags={updateBulkTags}
+      />
     </div>
   );
 };
diff --git a/dashboard/components/icons/HyperLinkIcon.tsx b/dashboard/components/icons/HyperLinkIcon.tsx
new file mode 100644
index 000000000..4f6500180
--- /dev/null
+++ b/dashboard/components/icons/HyperLinkIcon.tsx
@@ -0,0 +1,22 @@
+import { SVGProps } from 'react';
+
+const HyperLinkIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      d="M13 11l8.2-8.2M22 6.8V2h-4.8M11 2H9C4 2 2 4 2 9v6c0 5 2 7 7 7h6c5 0 7-2 7-7v-2"
+    ></path>
+  </svg>
+);
+
+export default HyperLinkIcon;
diff --git a/dashboard/components/inventory/components/InventorySidePanel.tsx b/dashboard/components/inventory/components/InventorySidePanel.tsx
index 4b56a8723..f0fe05ea3 100644
--- a/dashboard/components/inventory/components/InventorySidePanel.tsx
+++ b/dashboard/components/inventory/components/InventorySidePanel.tsx
@@ -1,3 +1,6 @@
+import SidepanelHeader from '@components/sidepanel/SidepanelHeader';
+import SidepanelPage from '@components/sidepanel/SidepanelPage';
+import Pill from '@components/pill/Pill';
 import formatNumber from '../../../utils/formatNumber';
 import providers from '../../../utils/providerHelper';
 import Button from '../../button/Button';
@@ -27,6 +30,7 @@ type InventorySidePanelProps = {
   isOpen: boolean;
   bulkItems: [] | string[];
   updateBulkTags: (action?: 'delete' | undefined) => void;
+  tabs: string[];
 };
 
 function InventorySidePanel({
@@ -43,80 +47,125 @@ function InventorySidePanel({
   deleteLoading,
   isOpen,
   bulkItems,
-  updateBulkTags
+  updateBulkTags,
+  tabs
 }: InventorySidePanelProps) {
+  const getLastFetched = (date: string) => {
+    const givenDate = new Date(date);
+    // Current date
+    const currentDate = new Date();
+
+    // Calculate "since last month" date
+    const lastMonthDate = new Date(currentDate);
+    lastMonthDate.setMonth(currentDate.getMonth() - 1);
+
+    // Calculate "since last week" date
+    const lastWeekDate = new Date(currentDate);
+    lastWeekDate.setDate(currentDate.getDate() - 7);
+
+    let message;
+    // Compare the given date to the calculated dates
+    if (givenDate > lastMonthDate) {
+      message = 'Since last month';
+    } else if (givenDate > lastWeekDate) {
+      message = 'Since last week';
+    } else {
+      message = 'More than a month ago';
+    }
+    return message;
+  };
+
   return (
     <>
       <Sidepanel isOpen={isOpen} closeModal={closeModal}>
         {/* Modal headers */}
-        <div className="flex flex-wrap-reverse items-center justify-between gap-6 sm:flex-nowrap">
-          {data && (
-            <div className="flex flex-wrap items-center gap-4 sm:flex-nowrap">
-              <picture className="flex-shrink-0">
-                <img
-                  src={providers.providerImg(data.provider)}
-                  className="h-8 w-8 rounded-full"
-                  alt={data.provider}
-                />
-              </picture>
-
+        {data && (
+          <SidepanelHeader
+            title={data.service}
+            subtitle={data.name}
+            closeModal={closeModal}
+            href={data.link}
+            imgSrc={providers.providerImg(data.provider)}
+            imgAlt={data.provider}
+          >
+            {!data && bulkItems && (
               <div className="flex flex-col gap-1 py-1">
-                <p className="... w-48 truncate font-medium text-black-900">
-                  {data.service}
+                <p className="font-medium text-black-900">
+                  Managing tags for {formatNumber(bulkItems.length)}{' '}
+                  {bulkItems.length > 1 ? 'resources' : 'resource'}
                 </p>
-                <p className="flex items-center gap-2 text-xs text-black-300">
-                  {data.name}
-                  <a
-                    target="_blank"
-                    href={data.link}
-                    rel="noreferrer"
-                    className="hover:text-primary"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="1.5"
-                        d="M13 11l8.2-8.2M22 6.8V2h-4.8M11 2H9C4 2 2 4 2 9v6c0 5 2 7 7 7h6c5 0 7-2 7-7v-2"
-                      ></path>
-                    </svg>
-                  </a>
+                <p className="text-xs text-black-300">
+                  All actions will overwrite previous tags for these resources
                 </p>
               </div>
-            </div>
-          )}
-          {!data && bulkItems && (
-            <div className="flex flex-col gap-1 py-1">
-              <p className="font-medium text-black-900">
-                Managing tags for {formatNumber(bulkItems.length)}{' '}
-                {bulkItems.length > 1 ? 'resources' : 'resource'}
-              </p>
-              <p className="text-xs text-black-300">
-                All actions will overwrite previous tags for these resources
-              </p>
-            </div>
-          )}
-
-          <div className="flex flex-shrink-0 items-center gap-2">
-            <Button style="secondary" onClick={closeModal}>
-              Close
-            </Button>
-          </div>
-        </div>
+            )}
+          </SidepanelHeader>
+        )}
 
         {/* Tabs */}
-        <SidepanelTabs goTo={goTo} page={page} tabs={['Tags']} />
+        <SidepanelTabs goTo={goTo} page={page} tabs={tabs} />
 
+        {/* Tab Content */}
+        {tabs.includes('resource details') && (
+          <SidepanelPage page={page} param={'resource details'}>
+            <div className="space-y-6 pt-1">
+              <div className="space-y-2">
+                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                  Cloud account
+                </h2>
+                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-900">
+                  {!data && (
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                  )}
+                  {data && <span>{data.account}</span>}
+                </h2>
+              </div>
+              <div className="space-y-2">
+                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                  Region
+                </h2>
+                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-900">
+                  {!data && (
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                  )}
+                  {data && <span>{data.region}</span>}
+                </h2>
+              </div>
+              <div className="space-y-2">
+                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                  Cost
+                </h2>
+                <h2 className=" flex items-center gap-2 text-sm">
+                  {!data && (
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                  )}
+                  {data && <span>{data?.cost.toFixed(2)}$</span>}
+                  {data && (
+                    <Pill status="removed">
+                      {getLastFetched(data.fetchedAt)}
+                    </Pill>
+                  )}
+                </h2>
+              </div>
+              <div className="space-y-2">
+                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-500">
+                  Relations
+                </h2>
+                <h2 className="font-['Noto Sans'] text-sm font-normal leading-tight text-neutral-900">
+                  {!data && (
+                    <p className="h-3 w-48 animate-pulse rounded-xl bg-komiser-200"></p>
+                  )}
+                  {data && (
+                    <span>{data.relations.length} related resources</span>
+                  )}
+                </h2>
+              </div>
+            </div>
+          </SidepanelPage>
+        )}
         {/* Tags form */}
-        <div>
-          {page === 'tags' && (
+        {tabs.includes('tags') && (
+          <SidepanelPage page={page} param={'tags'}>
             <form
               onSubmit={e => {
                 e.preventDefault();
@@ -127,7 +176,7 @@ function InventorySidePanel({
                   updateTags();
                 }
               }}
-              className="flex flex-col gap-6 pt-2"
+              className="flex flex-col gap-6 px-1 pt-2"
             >
               {tags &&
                 tags.map((tag, id) => (
@@ -185,8 +234,9 @@ function InventorySidePanel({
                 </Button>
               </div>
             </form>
-          )}
-
+          </SidepanelPage>
+        )}
+        <div>
           {page === 'delete' && (
             <>
               <div className="flex flex-col gap-6 bg-black-100 p-6">
diff --git a/dashboard/components/inventory/hooks/useInventory/types/useInventoryTypes.ts b/dashboard/components/inventory/hooks/useInventory/types/useInventoryTypes.ts
index cf4eb2b09..544133e08 100644
--- a/dashboard/components/inventory/hooks/useInventory/types/useInventoryTypes.ts
+++ b/dashboard/components/inventory/hooks/useInventory/types/useInventoryTypes.ts
@@ -40,6 +40,7 @@ export type Tag = {
 };
 
 export type InventoryItem = {
+  relations: any[];
   account: string;
   accountId: string;
   cost: number;
@@ -55,7 +56,7 @@ export type InventoryItem = {
   service: string;
   tags: Tag[] | [] | null;
 };
-export type Pages = 'tags' | 'delete';
+export type Pages = 'resource details' | 'tags' | 'delete';
 
 export type View = {
   id: number;
diff --git a/dashboard/components/inventory/hooks/useInventory/useInventory.tsx b/dashboard/components/inventory/hooks/useInventory/useInventory.tsx
index aace2643b..ceb6fb4ba 100644
--- a/dashboard/components/inventory/hooks/useInventory/useInventory.tsx
+++ b/dashboard/components/inventory/hooks/useInventory/useInventory.tsx
@@ -34,7 +34,7 @@ function useInventory() {
   const [shouldFetchMore, setShouldFetchMore] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [data, setData] = useState<InventoryItem>();
-  const [page, setPage] = useState<Pages>('tags');
+  const [page, setPage] = useState<Pages>('resource details');
   const [tags, setTags] = useState<Tag[]>();
   const [loading, setLoading] = useState(false);
   const [deleteLoading, setDeleteLoading] = useState(false);
@@ -461,7 +461,7 @@ function useInventory() {
    */
   function cleanModal() {
     setData(undefined);
-    setPage('tags');
+    setPage('resource details');
   }
 
   /** Opens the modal, as well as:
diff --git a/dashboard/pages/inventory.tsx b/dashboard/pages/inventory.tsx
index 5a9d6451b..4ef3017a4 100644
--- a/dashboard/pages/inventory.tsx
+++ b/dashboard/pages/inventory.tsx
@@ -173,6 +173,7 @@ export default function Inventory() {
           deleteLoading={deleteLoading}
           bulkItems={bulkItems}
           updateBulkTags={updateBulkTags}
+          tabs={['resource details', 'tags']}
         />
 
         {/* Error state */}
diff --git a/dashboard/services/settingsService.ts b/dashboard/services/settingsService.ts
index 5b4b5dd50..59d48e463 100644
--- a/dashboard/services/settingsService.ts
+++ b/dashboard/services/settingsService.ts
@@ -135,6 +135,19 @@ const settingsService = {
     }
   },
 
+  async getResourceById(urlParams: string) {
+    try {
+      const res = await fetch(
+        `${BASE_URL}/resources${urlParams}`,
+        settings('GET')
+      );
+      const data = await res.json();
+      return data;
+    } catch (error) {
+      return Error;
+    }
+  },
+
   async getInventoryStats() {
     try {
       const res = await fetch(`${BASE_URL}/stats`, settings('GET'));

From c16d190a181ca01b3299d949f4c45d9256d0fbbd Mon Sep 17 00:00:00 2001
From: Mohammed Faisal Hussain <faisalhussain7008@gmail.com>
Date: Tue, 31 Oct 2023 20:06:57 +0530
Subject: [PATCH 4/4] fix: optimized code and fixed date issue

---
 .../components/explorer/DependencyGraph.tsx   |  4 +-
 .../components/InventorySidePanel.tsx         | 21 ++-----
 dashboard/components/pill/Pill.tsx            | 63 ++++++++++---------
 .../components/sidepanel/SidepanelTabs.tsx    |  4 +-
 dashboard/utils/formatString.ts               |  7 +++
 5 files changed, 51 insertions(+), 48 deletions(-)
 create mode 100644 dashboard/utils/formatString.ts

diff --git a/dashboard/components/explorer/DependencyGraph.tsx b/dashboard/components/explorer/DependencyGraph.tsx
index 336113065..5b650d767 100644
--- a/dashboard/components/explorer/DependencyGraph.tsx
+++ b/dashboard/components/explorer/DependencyGraph.tsx
@@ -64,9 +64,7 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
   const handleNodeClick = async (event: EventObject) => {
     const nodeData = event.target.data();
     settingsService.getResourceById(`?resourceId=${nodeData.id}`).then(res => {
-      if (res === Error) {
-        console.log('Error retrieving resource by id');
-      } else {
+      if (res !== Error) {
         openModal(res);
       }
     });
diff --git a/dashboard/components/inventory/components/InventorySidePanel.tsx b/dashboard/components/inventory/components/InventorySidePanel.tsx
index f0fe05ea3..8248657cd 100644
--- a/dashboard/components/inventory/components/InventorySidePanel.tsx
+++ b/dashboard/components/inventory/components/InventorySidePanel.tsx
@@ -51,23 +51,14 @@ function InventorySidePanel({
   tabs
 }: InventorySidePanelProps) {
   const getLastFetched = (date: string) => {
-    const givenDate = new Date(date);
-    // Current date
-    const currentDate = new Date();
-
-    // Calculate "since last month" date
-    const lastMonthDate = new Date(currentDate);
-    lastMonthDate.setMonth(currentDate.getMonth() - 1);
-
-    // Calculate "since last week" date
-    const lastWeekDate = new Date(currentDate);
-    lastWeekDate.setDate(currentDate.getDate() - 7);
-
+    const dateLastFetched = new Date(date);
+    const today = new Date();
+    const aMonthAgo = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
+    const aWeekAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
     let message;
-    // Compare the given date to the calculated dates
-    if (givenDate > lastMonthDate) {
+    if (dateLastFetched > aMonthAgo) {
       message = 'Since last month';
-    } else if (givenDate > lastWeekDate) {
+    } else if (dateLastFetched > aWeekAgo) {
       message = 'Since last week';
     } else {
       message = 'More than a month ago';
diff --git a/dashboard/components/pill/Pill.tsx b/dashboard/components/pill/Pill.tsx
index 90ee465f5..31718ff2d 100644
--- a/dashboard/components/pill/Pill.tsx
+++ b/dashboard/components/pill/Pill.tsx
@@ -14,40 +14,45 @@ export type PillProps = {
 };
 
 function Pill({ status, children, textcase = 'lowercase' }: PillProps) {
-  function handleBgColor() {
-    let color;
-
-    if (status === 'active') color = 'bg-green-100';
-    if (status === 'pending') color = 'bg-orange-100';
-    if (status === 'removed') color = 'bg-rose-100';
-    if (status === 'inactive') color = 'bg-zinc-100';
-    if (status === 'info') color = 'bg-blue-100';
-    if (status === 'new') color = 'bg-sky-100';
-    if (status === 'highlight') color = 'bg-violet-100';
-
-    return color;
-  }
-
-  function handleFontColor() {
-    let color;
-
-    if (status === 'active') color = 'text-green-400';
-    if (status === 'pending') color = 'text-orange-400';
-    if (status === 'removed') color = 'text-red-400';
-    if (status === 'inactive') color = 'text-zinc-400';
-    if (status === 'info') color = 'text-blue-500';
-    if (status === 'new') color = 'text-teal-600';
-    if (status === 'highlight') color = 'text-violet-600';
-
-    return color;
-  }
+  const colors = {
+    active: {
+      background: 'bg-green-100',
+      text: 'text-green-400'
+    },
+    pending: {
+      background: 'bg-orange-100',
+      text: 'text-orange-400'
+    },
+    removed: {
+      background: 'bg-rose-100',
+      text: 'text-red-400'
+    },
+    inactive: {
+      background: 'bg-zinc-100',
+      text: 'text-zinc-400'
+    },
+    info: {
+      background: 'bg-blue-100',
+      text: 'text-blue-500'
+    },
+    new: {
+      background: 'bg-sky-100',
+      text: 'text-teal-600'
+    },
+    highlight: {
+      background: 'bg-violet-100',
+      text: 'text-violet-600'
+    }
+  };
+
+  const handleColor = () => colors[status];
 
   return (
     <div
-      className={`inline-flex items-start justify-start gap-2.5 rounded-3xl px-1.5 pb-1 pt-0.5 ${handleBgColor()}`}
+      className={`inline-flex items-start justify-start gap-2.5 rounded-3xl px-1.5 pb-1 pt-0.5 ${handleColor().background}`}
     >
       <p
-        className={`${handleFontColor()} font-sans text-xs font-normal ${textcase}`}
+        className={`${handleColor().text} font-sans text-xs font-normal ${textcase}`}
       >
         {children}
       </p>
diff --git a/dashboard/components/sidepanel/SidepanelTabs.tsx b/dashboard/components/sidepanel/SidepanelTabs.tsx
index 453789fb4..b5715b3a6 100644
--- a/dashboard/components/sidepanel/SidepanelTabs.tsx
+++ b/dashboard/components/sidepanel/SidepanelTabs.tsx
@@ -1,3 +1,5 @@
+import { capitalizeString } from "@utils/formatString";
+
 export type SidepanelTabsProps = {
   goTo: (page: any) => void;
   page: string;
@@ -19,7 +21,7 @@ function SidepanelTabs({ goTo, page, tabs }: SidepanelTabsProps) {
                          : 'border-transparent hover:text-komiser-700'
                      }`}
             >
-              {tab.charAt(0).toUpperCase() + tab.slice(1).toLowerCase()}{' '}
+              {capitalizeString(tab)}{' '}
               {/* capitalize first letter */}
             </a>
           </li>
diff --git a/dashboard/utils/formatString.ts b/dashboard/utils/formatString.ts
new file mode 100644
index 000000000..a698374f6
--- /dev/null
+++ b/dashboard/utils/formatString.ts
@@ -0,0 +1,7 @@
+export function capitalizeString(inputString: string) {
+    if (inputString.length < 0) return inputString;
+
+    return (
+        inputString.charAt(0).toUpperCase() + inputString.slice(1).toLowerCase()
+    );
+}
\ No newline at end of file