@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

package/dist/assets/storefront/src/app/[locale]/account/company/business-units/business-units-client.tsx

@@ -1,9 +1,5 @@
 'use client';
 
-import {useState} from 'react';
-import {useTranslations} from 'next-intl';
-import {Button} from '@/components/ui/button';
-import {Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle} from '@/components/ui/dialog';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -14,11 +10,15 @@ import {
     AlertDialogHeader,
     AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
-import {Plus, Edit2, Trash2} from 'lucide-react';
-import {BusinessUnitForm} from './business-unit-form';
-import {createBusinessUnitAction, updateBusinessUnitAction, deleteBusinessUnitAction} from './actions';
-import {useRouter} from '@/i18n/navigation';
-import type {CompanyBusinessUnit, BUFormSubmitData} from './types';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useRouter } from '@/i18n/navigation';
+import { Edit2, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { createBusinessUnitAction, deleteBusinessUnitAction, updateBusinessUnitAction } from './actions';
+import { BusinessUnitForm } from './business-unit-form';
+import type { BUFormSubmitData, CompanyBusinessUnit } from './types';
 
 interface BusinessUnitsClientProps {
     businessUnits: CompanyBusinessUnit[];
@@ -37,13 +37,13 @@ function BusinessUnitNode({
     onEdit: (bu: CompanyBusinessUnit) => void;
     onDelete: (bu: CompanyBusinessUnit) => void;
 }) {
-    const children = allBusinessUnits.filter(b => b.parent?.id === bu.id);
+    const children = allBusinessUnits.filter((b) => b.parent?.id === bu.id);
 
     return (
         <div>
             <div
                 className="flex items-center justify-between py-3 px-4 border rounded-md bg-card"
-                style={{marginLeft: depth * 24}}
+                style={{ marginLeft: depth * 24 }}
             >
                 <div className="space-y-1">
                     <div className="font-medium">{bu.name}</div>
@@ -61,10 +61,10 @@ function BusinessUnitNode({
                     </Button>
                 </div>
             </div>
-            {children.map(child => (
+            {children.map((child) => (
                 <BusinessUnitNode
                     key={child.id}
-                    bu={allBusinessUnits.find(b => b.id === child.id) || child}
+                    bu={allBusinessUnits.find((b) => b.id === child.id) || child}
                     allBusinessUnits={allBusinessUnits}
                     depth={depth + 1}
                     onEdit={onEdit}
@@ -75,7 +75,7 @@ function BusinessUnitNode({
     );
 }
 
-export function BusinessUnitsClient({businessUnits}: BusinessUnitsClientProps) {
+export function BusinessUnitsClient({ businessUnits }: BusinessUnitsClientProps) {
     const t = useTranslations('Company.businessUnits');
     const router = useRouter();
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -104,9 +104,20 @@ export function BusinessUnitsClient({businessUnits}: BusinessUnitsClientProps) {
         setIsSubmitting(true);
         try {
             if (data.id) {
-                await updateBusinessUnitAction({id: data.id, name: data.name, email: data.email, phone: data.phone, parentId: data.parentId});
+                await updateBusinessUnitAction({
+                    id: data.id,
+                    name: data.name,
+                    email: data.email,
+                    phone: data.phone,
+                    parentId: data.parentId,
+                });
             } else {
-                await createBusinessUnitAction({name: data.name, email: data.email, phone: data.phone, parentId: data.parentId});
+                await createBusinessUnitAction({
+                    name: data.name,
+                    email: data.email,
+                    phone: data.phone,
+                    parentId: data.parentId,
+                });
             }
             router.refresh();
             setDialogOpen(false);
@@ -135,7 +146,7 @@ export function BusinessUnitsClient({businessUnits}: BusinessUnitsClientProps) {
         }
     };
 
-    const topLevelBus = businessUnits.filter(bu => !bu.parent);
+    const topLevelBus = businessUnits.filter((bu) => !bu.parent);
 
     return (
         <>
@@ -148,12 +159,10 @@ export function BusinessUnitsClient({businessUnits}: BusinessUnitsClientProps) {
             </div>
 
             {businessUnits.length === 0 ? (
-                <div className="text-center py-12 text-muted-foreground">
-                    {t('noBusinessUnits')}
-                </div>
+                <div className="text-center py-12 text-muted-foreground">{t('noBusinessUnits')}</div>
             ) : (
                 <div className="space-y-2">
-                    {topLevelBus.map(bu => (
+                    {topLevelBus.map((bu) => (
                         <BusinessUnitNode
                             key={bu.id}
                             bu={bu}
@@ -171,9 +180,7 @@ export function BusinessUnitsClient({businessUnits}: BusinessUnitsClientProps) {
                     <DialogHeader>
                         <DialogTitle>{editingBu ? t('editDialogTitle') : t('addDialogTitle')}</DialogTitle>
                         <DialogDescription>
-                            {editingBu
-                                ? t('editDialogDescription')
-                                : t('addDialogDescription')}
+                            {editingBu ? t('editDialogDescription') : t('addDialogDescription')}
                         </DialogDescription>
                     </DialogHeader>
                     <BusinessUnitForm
@@ -194,7 +201,7 @@ export function BusinessUnitsClient({businessUnits}: BusinessUnitsClientProps) {
                     <AlertDialogHeader>
                         <AlertDialogTitle>{t('deleteDialogTitle')}</AlertDialogTitle>
                         <AlertDialogDescription>
-                            {t('deleteDialogDescription', {name: buToDelete?.name ?? ''})}
+                            {t('deleteDialogDescription', { name: buToDelete?.name ?? '' })}
                         </AlertDialogDescription>
                     </AlertDialogHeader>
                     <AlertDialogFooter>

package/dist/assets/storefront/src/app/[locale]/account/company/business-units/page.tsx

@@ -1,20 +1,22 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {redirect} from '@/i18n/navigation';
-import {readFragment} from '@/graphql';
-import {getCompanyAccount} from '@/lib/vendure/actions';
-import {client} from '@/lib/vendure/api';
-import {GetCompanyBusinessUnitsQuery} from '@/lib/vendure/queries';
-import {CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
-import {ErrorState} from '@/components/shared/error-state';
-import {BusinessUnitsClient} from './business-units-client';
-import {getTranslations} from 'next-intl/server';
+import { ErrorState } from '@/components/shared/error-state';
+import { readFragment } from '@/graphql';
+import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
+import { getCompanyAccount } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { CompanyBusinessUnitFragment } from '@/lib/vendure/fragments';
+import { GetCompanyBusinessUnitsQuery } from '@/lib/vendure/queries';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+import { BusinessUnitsClient } from './business-units-client';
 
 export const metadata: Metadata = {
     title: 'Business Units',
 };
 
 async function BusinessUnitsContent() {
+    await pinRootLocale();
     const [t, companyAccount] = await Promise.all([
         getTranslations('Company.businessUnits'),
         getCompanyAccount(),
@@ -25,7 +27,7 @@ async function BusinessUnitsContent() {
         return;
     }
 
-    const {permissions} = companyAccount;
+    const { permissions } = companyAccount;
 
     if (!permissions.includes('ManageBusinessUnits')) {
         await redirect('/account/orders');
@@ -33,19 +35,17 @@ async function BusinessUnitsContent() {
 
     const [result, error] = await client.query(GetCompanyBusinessUnitsQuery, undefined);
     if (error) {
-        return (
-            <ErrorState message="We couldn't load this page. Please try again later." />
-        );
+        return <ErrorState message="We couldn't load this page. Please try again later." />;
     }
-    const businessUnits = (result.data.companyBusinessUnits ?? []).map(bu => readFragment(CompanyBusinessUnitFragment, bu));
+    const businessUnits = (result.data.companyBusinessUnits ?? []).map((bu) =>
+        readFragment(CompanyBusinessUnitFragment, bu),
+    );
 
     return (
         <div className="space-y-6">
             <div>
                 <h1 className="text-3xl font-bold">{t('pageTitle')}</h1>
-                <p className="text-muted-foreground mt-2">
-                    {t('pageDescription')}
-                </p>
+                <p className="text-muted-foreground mt-2">{t('pageDescription')}</p>
             </div>
 
             <BusinessUnitsClient businessUnits={businessUnits} />
@@ -55,11 +55,13 @@ async function BusinessUnitsContent() {
 
 export default function BusinessUnitsPage() {
     return (
-        <Suspense fallback={
-            <div className="text-center py-12">
-                <p className="text-sm text-muted-foreground">Loading...</p>
-            </div>
-        }>
+        <Suspense
+            fallback={
+                <div className="text-center py-12">
+                    <p className="text-sm text-muted-foreground">Loading...</p>
+                </div>
+            }
+        >
             <BusinessUnitsContent />
         </Suspense>
     );

package/dist/assets/storefront/src/app/[locale]/account/company/business-units/types.ts

@@ -1,8 +1,11 @@
-import type {ResultOf, VariablesOf} from '@/graphql';
-import {CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
-import {CreateCompanyBusinessUnitMutation, UpdateCompanyBusinessUnitMutation} from '@/lib/vendure/mutations';
+import type { ResultOf, VariablesOf } from '@/graphql';
+import { CompanyBusinessUnitFragment } from '@/lib/vendure/fragments';
+import {
+    CreateCompanyBusinessUnitMutation,
+    UpdateCompanyBusinessUnitMutation,
+} from '@/lib/vendure/mutations';
 
 export type CompanyBusinessUnit = ResultOf<typeof CompanyBusinessUnitFragment>;
 export type CreateBUInput = VariablesOf<typeof CreateCompanyBusinessUnitMutation>['input'];
 export type UpdateBUInput = VariablesOf<typeof UpdateCompanyBusinessUnitMutation>['input'];
-export type BUFormSubmitData = CreateBUInput & {id?: string};
+export type BUFormSubmitData = CreateBUInput & { id?: string };

package/dist/assets/storefront/src/app/[locale]/account/company/edit-company-form.tsx

@@ -1,18 +1,18 @@
 'use client';
 
-import {useActionState} from 'react';
-import {updateCompanyAction} from './actions';
-import {Button} from '@/components/ui/button';
-import {Input} from '@/components/ui/input';
-import {Label} from '@/components/ui/label';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
-import {useTranslations} from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { useTranslations } from 'next-intl';
+import { useActionState } from 'react';
+import { updateCompanyAction } from './actions';
 
 interface EditCompanyFormProps {
     companyName: string;
 }
 
-export function EditCompanyForm({companyName}: EditCompanyFormProps) {
+export function EditCompanyForm({ companyName }: EditCompanyFormProps) {
     const t = useTranslations('Company.editCompany');
     const [state, formAction, isPending] = useActionState(updateCompanyAction, undefined);
 
@@ -20,9 +20,7 @@ export function EditCompanyForm({companyName}: EditCompanyFormProps) {
         <Card>
             <CardHeader>
                 <CardTitle>{t('cardTitle')}</CardTitle>
-                <CardDescription>
-                    {t('cardDescription')}
-                </CardDescription>
+                <CardDescription>{t('cardDescription')}</CardDescription>
             </CardHeader>
             <form action={formAction}>
                 <CardContent className="space-y-4">
@@ -37,16 +35,8 @@ export function EditCompanyForm({companyName}: EditCompanyFormProps) {
                             disabled={isPending}
                         />
                     </div>
-                    {state?.error && (
-                        <div className="text-sm text-destructive">
-                            {state.error}
-                        </div>
-                    )}
-                    {state?.success && (
-                        <div className="text-sm text-green-600">
-                            {t('updateSuccess')}
-                        </div>
-                    )}
+                    {state?.error && <div className="text-sm text-destructive">{state.error}</div>}
+                    {state?.success && <div className="text-sm text-green-600">{t('updateSuccess')}</div>}
                     <Button type="submit" disabled={isPending}>
                         {isPending ? t('updatingButton') : t('updateButton')}
                     </Button>

package/dist/assets/storefront/src/app/[locale]/account/company/page.tsx

@@ -1,29 +1,28 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {redirect} from '@/i18n/navigation';
-import {Clock} from 'lucide-react';
-import {getCompanyAccount, getMyCompanies} from '@/lib/vendure/actions';
-import {CompanyStateBadge} from '@/components/commerce/company-state-badge';
-import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
-import {EditCompanyForm} from './edit-company-form';
-import {getTranslations} from 'next-intl/server';
+import { CompanyStateBadge } from '@/components/commerce/company-state-badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
+import { getCompanyAccount, getMyCompanies } from '@/lib/vendure/actions';
+import { Clock } from 'lucide-react';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+import { EditCompanyForm } from './edit-company-form';
 
 export const metadata: Metadata = {
     title: 'Company Profile',
 };
 
 async function CompanyProfileContent() {
-    const [t, companyAccount] = await Promise.all([
-        getTranslations('Company'),
-        getCompanyAccount(),
-    ]);
+    await pinRootLocale();
+    const [t, companyAccount] = await Promise.all([getTranslations('Company'), getCompanyAccount()]);
 
     if (!companyAccount) {
         // Company context not available (requires Active company state) —
         // check if user has a non-active company (e.g. Pending approval).
         // Note: c.state is the Company entity state, not the CompanyUser state.
         const companies = await getMyCompanies();
-        const pendingCompany = companies.find(c => c.state !== 'Active');
+        const pendingCompany = companies.find((c) => c.state !== 'Active');
         if (pendingCompany) {
             return (
                 <div className="space-y-6">
@@ -41,9 +40,7 @@ async function CompanyProfileContent() {
                             </CardTitle>
                         </CardHeader>
                         <CardContent>
-                            <p className="text-muted-foreground">
-                                {t('pendingRegistrationMessage')}
-                            </p>
+                            <p className="text-muted-foreground">{t('pendingRegistrationMessage')}</p>
                         </CardContent>
                     </Card>
                 </div>
@@ -53,9 +50,9 @@ async function CompanyProfileContent() {
         return;
     }
 
-    const {company, companyUser, permissions} = companyAccount;
+    const { company, companyUser, permissions } = companyAccount;
     const canManageCompany = permissions.includes('ManageCompany');
-    const roleNames = companyUser.companyRoles.map((r: {name: string}) => r.name).join(', ');
+    const roleNames = companyUser.companyRoles.map((r: { name: string }) => r.name).join(', ');
 
     return (
         <div className="space-y-6">
@@ -65,24 +62,24 @@ async function CompanyProfileContent() {
                     <CompanyStateBadge state={company.state} />
                 </div>
                 <p className="text-muted-foreground mt-2">
-                    {roleNames ? t('yourRole', {roleNames}) : t('companyMember')}
+                    {roleNames ? t('yourRole', { roleNames }) : t('companyMember')}
                 </p>
             </div>
 
-            {canManageCompany && (
-                <EditCompanyForm companyName={company.name} />
-            )}
+            {canManageCompany && <EditCompanyForm companyName={company.name} />}
         </div>
     );
 }
 
 export default function CompanyPage() {
     return (
-        <Suspense fallback={
-            <div className="text-center py-12">
-                <p className="text-sm text-muted-foreground">Loading...</p>
-            </div>
-        }>
+        <Suspense
+            fallback={
+                <div className="text-center py-12">
+                    <p className="text-sm text-muted-foreground">Loading...</p>
+                </div>
+            }
+        >
             <CompanyProfileContent />
         </Suspense>
     );

package/dist/assets/storefront/src/app/[locale]/account/company/payment-methods/page.tsx

@@ -1,20 +1,22 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {redirect} from '@/i18n/navigation';
-import {readFragment} from '@/graphql';
-import {client} from '@/lib/vendure/api';
-import {getCompanyAccount} from '@/lib/vendure/actions';
-import {GetCompanyPaymentMethodsQuery} from '@/lib/vendure/queries';
-import {CompanyPaymentMethodFragment} from '@/lib/vendure/fragments';
-import {ErrorState} from '@/components/shared/error-state';
-import {PaymentMethodsClient} from './payment-methods-client';
-import {getTranslations} from 'next-intl/server';
+import { ErrorState } from '@/components/shared/error-state';
+import { readFragment } from '@/graphql';
+import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
+import { getCompanyAccount } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { CompanyPaymentMethodFragment } from '@/lib/vendure/fragments';
+import { GetCompanyPaymentMethodsQuery } from '@/lib/vendure/queries';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+import { PaymentMethodsClient } from './payment-methods-client';
 
 export const metadata: Metadata = {
     title: 'Company Payment Methods',
 };
 
 async function CompanyPaymentMethodsContent() {
+    await pinRootLocale();
     const [t, companyAccount] = await Promise.all([
         getTranslations('Company.paymentMethods'),
         getCompanyAccount(),
@@ -25,26 +27,24 @@ async function CompanyPaymentMethodsContent() {
         return;
     }
 
-    const {permissions} = companyAccount;
+    const { permissions } = companyAccount;
     if (!permissions.includes('ManagePaymentMethods')) {
         await redirect('/account/orders');
     }
 
     const [result, error] = await client.query(GetCompanyPaymentMethodsQuery, {});
     if (error) {
-        return (
-            <ErrorState message="We couldn't load this page. Please try again later." />
-        );
+        return <ErrorState message="We couldn't load this page. Please try again later." />;
     }
-    const paymentMethods = (result.data.companyPaymentMethods ?? []).map(pm => readFragment(CompanyPaymentMethodFragment, pm));
+    const paymentMethods = (result.data.companyPaymentMethods ?? []).map((pm) =>
+        readFragment(CompanyPaymentMethodFragment, pm),
+    );
 
     return (
         <div className="space-y-6">
             <div>
                 <h1 className="text-3xl font-bold">{t('pageTitle')}</h1>
-                <p className="text-muted-foreground mt-2">
-                    {t('pageDescription')}
-                </p>
+                <p className="text-muted-foreground mt-2">{t('pageDescription')}</p>
             </div>
 
             <PaymentMethodsClient paymentMethods={paymentMethods} />
@@ -54,11 +54,13 @@ async function CompanyPaymentMethodsContent() {
 
 export default function CompanyPaymentMethodsPage() {
     return (
-        <Suspense fallback={
-            <div className="text-center py-12">
-                <p className="text-sm text-muted-foreground">Loading...</p>
-            </div>
-        }>
+        <Suspense
+            fallback={
+                <div className="text-center py-12">
+                    <p className="text-sm text-muted-foreground">Loading...</p>
+                </div>
+            }
+        >
             <CompanyPaymentMethodsContent />
         </Suspense>
     );

package/dist/assets/storefront/src/app/[locale]/account/company/payment-methods/payment-methods-client.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import {useTranslations} from 'next-intl';
-import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
-import {CreditCard} from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { CreditCard } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 interface CompanyPaymentMethod {
     id: string;
@@ -15,7 +15,7 @@ interface PaymentMethodsClientProps {
     paymentMethods: CompanyPaymentMethod[];
 }
 
-export function PaymentMethodsClient({paymentMethods}: PaymentMethodsClientProps) {
+export function PaymentMethodsClient({ paymentMethods }: PaymentMethodsClientProps) {
     const t = useTranslations('Company.paymentMethods');
     if (paymentMethods.length === 0) {
         return (
@@ -36,9 +36,7 @@ export function PaymentMethodsClient({paymentMethods}: PaymentMethodsClientProps
                             <CreditCard className="h-5 w-5 text-muted-foreground" />
                             <CardTitle className="text-lg">{method.name}</CardTitle>
                         </div>
-                        {method.description && (
-                            <CardDescription>{method.description}</CardDescription>
-                        )}
+                        {method.description && <CardDescription>{method.description}</CardDescription>}
                     </CardHeader>
                     {method.terms && (
                         <CardContent>

package/dist/assets/storefront/src/app/[locale]/account/company/roles/page.tsx

@@ -1,41 +1,40 @@
-import type {Metadata} from 'next';
-import {Suspense} from 'react';
-import {redirect} from '@/i18n/navigation';
-import {readFragment} from '@/graphql';
-import {client} from '@/lib/vendure/api';
-import {getCompanyAccount} from '@/lib/vendure/actions';
-import {GetCompanyRolesQuery} from '@/lib/vendure/queries';
-import {CompanyPermissionFragment, CompanyRoleFragment} from '@/lib/vendure/fragments';
-import {RolesClient} from './roles-client';
-import {getTranslations} from 'next-intl/server';
+import { readFragment } from '@/graphql';
+import { redirect } from '@/i18n/navigation';
+import { pinRootLocale } from '@/i18n/server';
+import { getCompanyAccount } from '@/lib/vendure/actions';
+import { client } from '@/lib/vendure/api';
+import { CompanyPermissionFragment, CompanyRoleFragment } from '@/lib/vendure/fragments';
+import { GetCompanyRolesQuery } from '@/lib/vendure/queries';
+import type { Metadata } from 'next';
+import { getTranslations } from 'next-intl/server';
+import { Suspense } from 'react';
+import { RolesClient } from './roles-client';
 
 export const metadata: Metadata = {
     title: 'Company Roles',
 };
 
 async function CompanyRolesContent() {
-    const [t, companyAccount] = await Promise.all([
-        getTranslations('Company.roles'),
-        getCompanyAccount(),
-    ]);
+    await pinRootLocale();
+    const [t, companyAccount] = await Promise.all([getTranslations('Company.roles'), getCompanyAccount()]);
 
     if (!companyAccount) {
         await redirect('/account/orders');
         return;
     }
 
-    const {permissions} = companyAccount;
+    const { permissions } = companyAccount;
     if (!permissions.includes('ManageRoles')) {
         await redirect('/account/orders');
     }
 
     const [rolesResult, rolesError] = await client.query(GetCompanyRolesQuery, {});
     if (rolesError) throw rolesError;
-    const roles = (rolesResult.data.companyRoles ?? []).map(r => {
+    const roles = (rolesResult.data.companyRoles ?? []).map((r) => {
         const role = readFragment(CompanyRoleFragment, r);
         return {
             ...role,
-            permissions: role.permissions.map(p => readFragment(CompanyPermissionFragment, p)),
+            permissions: role.permissions.map((p) => readFragment(CompanyPermissionFragment, p)),
         };
     });
 
@@ -43,9 +42,7 @@ async function CompanyRolesContent() {
         <div className="space-y-6">
             <div>
                 <h1 className="text-3xl font-bold">{t('pageTitle')}</h1>
-                <p className="text-muted-foreground mt-2">
-                    {t('pageDescription')}
-                </p>
+                <p className="text-muted-foreground mt-2">{t('pageDescription')}</p>
             </div>
 
             <RolesClient roles={roles} />
@@ -55,11 +52,13 @@ async function CompanyRolesContent() {
 
 export default function CompanyRolesPage() {
     return (
-        <Suspense fallback={
-            <div className="text-center py-12">
-                <p className="text-sm text-muted-foreground">Loading...</p>
-            </div>
-        }>
+        <Suspense
+            fallback={
+                <div className="text-center py-12">
+                    <p className="text-sm text-muted-foreground">Loading...</p>
+                </div>
+            }
+        >
             <CompanyRolesContent />
         </Suspense>
     );