Delete unused code and create a common layout

modules/web/web-app/components/ButtonTabs.tsx

@@ -0,0 +1,25 @@
+import { Button, ButtonProps, cn } from "@ui/index"
+import { PropsWithChildren } from "react"
+
+interface ButtonTabsProps extends Omit<ButtonProps, 'variant'>, PropsWithChildren {
+    active?: boolean
+}
+
+export const ButtonTabs = ({ children, active = false, ...props }: ButtonTabsProps) => {
+    const { className, ...rest } = props
+
+    return (
+        <Button
+            variant="ghost"
+            className={cn(
+                'text-[#606060] px-2 h-[26px] text-xs',
+                active && 'bg-accent text-accent-foreground',
+                !active && 'hover:bg-accent hover:text-accent-foreground',
+                className
+            )}
+            {...rest}
+        >
+            {children}
+        </Button>
+    )
+}

modules/web/web-app/components/PageHeading/PageHeading.tsx

@@ -1,5 +1,3 @@
-import { Count, StyledPageHeading } from '@/components/PageHeading/PageHeading.styled'
-
 import type { FunctionComponent, ReactNode } from 'react'
 
 interface PageHeadingProps {
@@ -9,10 +7,14 @@ interface PageHeadingProps {
 
 const PageHeading: FunctionComponent<PageHeadingProps> = ({ children, count }) => {
   return (
-    <StyledPageHeading>
+    <h1 className="text-2xl font-bold leading-none">
       {children}
-      {count !== undefined && count >= 0 && <Count>({count})</Count>}
-    </StyledPageHeading>
+      {count !== undefined && count >= 0 && (
+        <span className="inline-block text-lg font-medium leading-none text-gray-500 ml-3">
+          ({count})
+        </span>
+      )}
+    </h1>
   )
 }
 

modules/web/web-app/components/layouts/PageLayout.tsx

@@ -0,0 +1,76 @@
+import { Flex } from '@ui/index'
+import { PropsWithChildren, ReactNode } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import { ButtonTabs } from '@/components/ButtonTabs'
+
+interface TabConfig {
+    key: string
+    label: string
+}
+
+interface PageLayoutProps extends PropsWithChildren {
+    imgLink: 'customers' | 'invoices' | 'subscriptions'
+    title: string
+    tabs?: TabConfig[]
+    customTabs?: ReactNode
+    actions?: ReactNode
+}
+
+export const PageLayout = ({ imgLink, title, children, tabs, customTabs, actions }: PageLayoutProps) => {
+    const [searchParams, setSearchParams] = useSearchParams()
+    const currentTab = searchParams.get('tab') || (tabs?.[0]?.key ?? 'all')
+
+    const updateTab = (tab: string) => {
+        const newSearchParams = new URLSearchParams(searchParams)
+
+        if (tab === (tabs?.[0]?.key ?? 'all')) {
+            newSearchParams.delete('tab')
+        } else {
+            newSearchParams.set('tab', tab.toLowerCase())
+        }
+        setSearchParams(newSearchParams)
+    }
+
+    const renderTabs = () => {
+        if (customTabs) {
+            return customTabs
+        }
+
+        if (tabs && tabs.length > 0) {
+            return (
+                <Flex align="center" className="gap-2 ml-2 mt-[0.5px]">
+                    {tabs.map((tab) => (
+                        <ButtonTabs
+                            key={tab.key}
+                            active={currentTab === tab.key}
+                            onClick={() => updateTab(tab.key)}
+                        >
+                            {tab.label}
+                        </ButtonTabs>
+                    ))}
+                </Flex>
+            )
+        }
+
+        return null
+    }
+
+    return <main className="flex  flex-col flex-1 w-full max-w-screen-2xl mx-auto h-full overflow-x-hidden">
+        <div className="relative pt-4 px-4 h-full overflow-y-auto flex flex-col gap-5">
+            <Flex direction="column" className="gap-2 h-full">
+                <Flex align="center" justify="between">
+                    <Flex align="center" className='gap-2'>
+                        <img src={`/header/${imgLink}.svg`} alt={title} />
+                        <div className="text-[15px] font-medium">{title}</div>
+                        {renderTabs()}
+                    </Flex>
+                    {actions && <Flex align="center" className='gap-2'>
+                        {actions}
+                    </Flex>}
+                </Flex>
+                {children}
+            </Flex>
+        </div>
+    </main>
+}