Refactor code and improve usage of package dependencies

This commit updates the naming convention of icons from Lucide-React, moving some package dependencies to "peerDependencies" in 'team-accounts', 'admin' and 'auth'. Additionally, it includes tweaks to the development server command in apps/web package.json and adds a logger reference to the shared package. Furthermore, cleanup work has been performed within the features and UI packages, and new scripts to interact with Stripe have been added to the root package.json.

apps/web/app/(dashboard)/home/[account]/billing/page.tsx

@@ -1,10 +1,16 @@
+import {
+  BillingPortalCard,
+  CurrentPlanCard,
+} from '@kit/billing-gateway/components';
+import { Database } from '@kit/supabase/database';
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
 import { If } from '@kit/ui/if';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { Trans } from '@kit/ui/trans';
 
 import { loadOrganizationWorkspace } from '~/(dashboard)/home/[account]/_lib/load-workspace';
-import { BillingPortalForm } from '~/(dashboard)/home/[account]/billing/_components/billing-portal-form';
+import { createBillingPortalSession } from '~/(dashboard)/home/[account]/billing/server-actions';
+import billingConfig from '~/config/billing.config';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { TeamAccountCheckoutForm } from './_components/team-account-checkout-form';
@@ -18,7 +24,7 @@ interface Params {
 async function OrganizationAccountBillingPage({ params }: Params) {
   const workspace = await loadOrganizationWorkspace(params.account);
   const accountId = workspace.account.id;
-  const customerId = await loadCustomerIdFromAccount(accountId);
+  const [subscription, customerId] = await loadAccountData(accountId);
 
   return (
     <>
@@ -28,11 +34,27 @@ async function OrganizationAccountBillingPage({ params }: Params) {
       />
 
       <PageBody>
-        <TeamAccountCheckoutForm accountId={accountId} />
+        <div className={'mx-auto w-full max-w-2xl'}>
+          <div className={'flex flex-col space-y-4'}>
+            <If
+              condition={subscription}
+              fallback={<TeamAccountCheckoutForm accountId={accountId} />}
+            >
+              {(data) => (
+                <CurrentPlanCard subscription={data} config={billingConfig} />
+              )}
+            </If>
 
-        <If condition={customerId}>
-          <BillingPortalForm accountId={accountId} />
-        </If>
+            <If condition={customerId}>
+              <form action={createBillingPortalSession}>
+                <input type="hidden" name={'accountId'} value={accountId} />
+                <input type="hidden" name={'slug'} value={params.account} />
+
+                <BillingPortalCard />
+              </form>
+            </If>
+          </div>
+        </div>
       </PageBody>
     </>
   );
@@ -40,18 +62,21 @@ async function OrganizationAccountBillingPage({ params }: Params) {
 
 export default withI18n(OrganizationAccountBillingPage);
 
-async function loadCustomerIdFromAccount(accountId: string) {
+async function loadAccountData(accountId: string) {
   const client = getSupabaseServerComponentClient();
 
-  const { data, error } = await client
+  const subscription = client
+    .from('subscriptions')
+    .select<string, Database['public']['Tables']['subscriptions']['Row']>('*')
+    .eq('account_id', accountId)
+    .maybeSingle()
+    .then(({ data }) => data);
+
+  const customerId = client
     .from('billing_customers')
     .select('customer_id')
     .eq('account_id', accountId)
     .maybeSingle();
 
-  if (error) {
-    throw error;
-  }
-
-  return data?.customer_id;
+  return Promise.all([subscription, customerId]);
 }