Add section for users to view purchased enterprise license keys in organization usage and billing section

frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx

@@ -33,7 +33,7 @@ export const CurrentPlanSection = () => {
 
   return (
     <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <h2 className="mb-8 flex-1 text-xl font-semibold text-white">Current Usage</h2>
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-white">Current usage</h2>
       <TableContainer className="mt-4">
         <Table>
           <THead>

frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/BillingSelfHostedTab.tsx

@@ -0,0 +1,9 @@
+import { LicensesSection } from "./LicensesSection";
+
+export const BillingSelfHostedTab = () => {
+    return (
+        <div>
+            <LicensesSection />
+        </div>
+    );
+}

frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/LicensesSection.tsx

@@ -0,0 +1,68 @@
+import { faFileContract } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import {
+    useGetOrgLicenses
+} from "@app/hooks/api";
+
+export const LicensesSection = () => {
+    const { currentOrg } = useOrganization();
+    const { data, isLoading } = useGetOrgLicenses(currentOrg?._id ?? "");
+    
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <h2 className="mb-8 flex-1 text-xl font-semibold text-white">Enterprise licenses</h2>
+            <TableContainer className="mt-4">
+                <Table>
+                    <THead>
+                        <Tr>
+                            <Th>License Key</Th>
+                            <Th>Status</Th>
+                            <Th>Issued Date</Th>
+                            <Th>Expiry Date</Th>
+                        </Tr>
+                    </THead>
+                    <TBody>
+                        {!isLoading && data && data?.length > 0 && data.map(({
+                            _id,
+                            licenseKey,
+                            isActivated,
+                            createdAt,
+                            expiresAt
+                        }) => {
+                            const formattedCreatedAt = new Date(createdAt).toISOString().split("T")[0];
+                            const formattedExpiresAt = new Date(expiresAt).toISOString().split("T")[0];
+                            return (
+                                <Tr key={`license-${_id}`} className="h-10">
+                                    <Td>{licenseKey}</Td>
+                                    <Td>{isActivated ? "Active" : "Inactive"}</Td>
+                                    <Td>{formattedCreatedAt}</Td>
+                                    <Td>{formattedExpiresAt}</Td>
+                                </Tr>
+                            );
+                        })}
+                        {isLoading && <TableSkeleton columns={4} innerKey="licenses" />}
+                        {!isLoading && data && data?.length === 0 && (
+                            <Tr>
+                                <Td colSpan={4}>
+                                    <EmptyState title="No enterprise licenses on file" icon={faFileContract} />
+                                </Td>
+                            </Tr>
+                        )}
+                    </TBody>
+                </Table>
+            </TableContainer>
+        </div>
+    );
+}

frontend/src/views/Settings/BillingSettingsPage/components/BillingSelfHostedTab/index.tsx

@@ -0,0 +1 @@
+export * from "./BillingSelfHostedTab";

frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -4,9 +4,11 @@ import { Tab } from "@headlessui/react"
 import { BillingCloudTab } from "../BillingCloudTab";
 import { BillingDetailsTab } from "../BillingDetailsTab";
 import { BillingReceiptsTab } from "../BillingReceiptsTab";
+import { BillingSelfHostedTab } from "../BillingSelfHostedTab";
 
 const tabs = [
     { name: "Infisical Cloud", key: "tab-infisical-cloud" },
+    { name: "Infisical Self-Hosted", key: "tab-infisical-self-hosted" },
     { name: "Receipts", key: "tab-receipts" },
     { name: "Billing details", key: "tab-billing-details" }
 ];
@@ -32,6 +34,9 @@ export const BillingTabGroup = () => {
                 <Tab.Panel>
                     <BillingCloudTab />
                 </Tab.Panel>
+                <Tab.Panel>
+                    <BillingSelfHostedTab />
+                </Tab.Panel>
                 <Tab.Panel>
                     <BillingReceiptsTab />
                 </Tab.Panel>