@carlonicora/nextjs-jsonapi 1.32.1 → 1.33.0

package/src/features/billing/stripe-price/components/forms/PriceEditor.tsx

@@ -19,6 +19,7 @@ import {
   Input,
   Label,
 } from "../../../../../shadcnui";
+import { FeatureInterface, FeatureService } from "../../../../feature";
 import { StripePriceInterface, StripePriceService } from "../../data";
 
 type PriceEditorProps = {
@@ -40,10 +41,25 @@ type PriceFormValues = {
   description?: string;
   features: string[];
   token: string;
+  featureIds: string[]; // Platform Feature entity IDs
 };
 
 export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }: PriceEditorProps) {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [allFeatures, setAllFeatures] = useState<FeatureInterface[]>([]);
+
+  // Fetch all platform features on mount
+  useEffect(() => {
+    const fetchFeatures = async () => {
+      try {
+        const features = await FeatureService.findMany({});
+        setAllFeatures(features);
+      } catch (error) {
+        console.error("[PriceEditor] Failed to fetch features:", error);
+      }
+    };
+    fetchFeatures();
+  }, []);
 
   const formSchema = z.object({
     unitAmount: z.preprocess(
@@ -62,6 +78,7 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
     description: z.string().optional(),
     features: z.array(z.string()),
     token: z.string(),
+    featureIds: z.array(z.string()),
   });
 
   const isEditMode = !!price;
@@ -69,6 +86,12 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
   // Convert cents to dollars for display
   const defaultUnitAmount = price?.unitAmount ? price.unitAmount / 100 : 0;
 
+  // Get core feature IDs that should always be selected
+  const coreFeatureIds = allFeatures.filter((f) => f.isCore).map((f) => f.id);
+
+  // Combine existing price features with core features (ensure no duplicates)
+  const defaultFeatureIds = [...new Set([...(price?.priceFeatures?.map((f) => f.id) ?? []), ...coreFeatureIds])];
+
   const form = useForm<PriceFormValues>({
     resolver: zodResolver(formSchema) as any,
     defaultValues: {
@@ -82,12 +105,19 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
       description: price?.description || "",
       features: price?.features || [],
       token: price?.token?.toString() ?? "",
+      featureIds: defaultFeatureIds,
     },
   });
 
   // Reset form when dialog opens to ensure fresh state
   useEffect(() => {
     if (open) {
+      // Recalculate core feature IDs with current allFeatures
+      const currentCoreFeatureIds = allFeatures.filter((f) => f.isCore).map((f) => f.id);
+      const resetFeatureIds = [
+        ...new Set([...(price?.priceFeatures?.map((f) => f.id) ?? []), ...currentCoreFeatureIds]),
+      ];
+
       form.reset({
         unitAmount: price?.unitAmount ? price.unitAmount / 100 : 0,
         currency: price?.currency || "usd",
@@ -99,9 +129,10 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
         description: price?.description || "",
         features: price?.features || [],
         token: price?.token?.toString() ?? "",
+        featureIds: resetFeatureIds,
       });
     }
-  }, [open, price?.id]);
+  }, [open, price?.id, allFeatures]);
 
   const watchInterval = form.watch("interval");
   const isRecurring = watchInterval !== "one_time";
@@ -121,6 +152,8 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
           description: values.description || undefined,
           features: values.features.filter((f) => f.trim()) || undefined,
           token: values.token ? parseInt(values.token, 10) : undefined,
+          // Only include featureIds for recurring prices (one-time prices don't support platform features)
+          ...(price?.priceType === "recurring" ? { featureIds: values.featureIds } : {}),
         });
       } else {
         // Create new price
@@ -157,6 +190,11 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
           createInput.token = parseInt(values.token, 10);
         }
 
+        // Add platform feature IDs only for recurring prices (Neo4j only, not sent to Stripe)
+        if (isRecurring && values.featureIds.length > 0) {
+          createInput.featureIds = values.featureIds;
+        }
+
         await StripePriceService.createPrice(createInput);
       }
 
@@ -317,6 +355,52 @@ export function PriceEditor({ productId, price, open, onOpenChange, onSuccess }:
               </div>
             </div>
 
+            {/* Platform Features Checkbox List - Only show for recurring prices */}
+            {isRecurring && allFeatures.length > 0 && (
+              <div className="space-y-2">
+                <Label>Platform Features</Label>
+                <div className="border rounded-md p-4 space-y-2 max-h-48 overflow-y-auto">
+                  {allFeatures.map((feature) => {
+                    const isCore = feature.isCore;
+                    const isChecked = form.watch("featureIds").includes(feature.id);
+
+                    return (
+                      <div key={feature.id} className="flex items-center space-x-2">
+                        <input
+                          type="checkbox"
+                          id={`feature-${feature.id}`}
+                          checked={isChecked}
+                          disabled={isCore}
+                          onChange={(e) => {
+                            const currentIds = form.getValues("featureIds");
+                            if (e.target.checked) {
+                              form.setValue("featureIds", [...currentIds, feature.id]);
+                            } else {
+                              // Don't allow unchecking core features
+                              if (!isCore) {
+                                form.setValue(
+                                  "featureIds",
+                                  currentIds.filter((id) => id !== feature.id),
+                                );
+                              }
+                            }
+                          }}
+                          className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary disabled:opacity-50"
+                        />
+                        <label
+                          htmlFor={`feature-${feature.id}`}
+                          className={`text-sm ${isCore ? "text-muted-foreground" : ""}`}
+                        >
+                          {feature.name}
+                          {isCore && <span className="ml-2 text-xs text-muted-foreground">(Core - Required)</span>}
+                        </label>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
             <FormCheckbox form={form} id="active" name="Active" />
 
             <CommonEditorButtons isEdit={isEditMode} form={form} disabled={isSubmitting} setOpen={onOpenChange} />

package/src/features/billing/stripe-price/data/stripe-price.interface.ts

@@ -1,5 +1,6 @@
 import { ApiDataInterface } from "../../../../core";
 import { StripeProductInterface } from "../../stripe-product";
+import { FeatureInterface } from "../../../feature";
 
 // ============================================================================
 // Stripe Price Interfaces
@@ -20,6 +21,7 @@ export interface StripePriceInterface extends ApiDataInterface {
   get description(): string | undefined;
   get features(): string[] | undefined;
   get token(): number | undefined;
+  get priceFeatures(): FeatureInterface[]; // Platform Feature entities linked to this price
 }
 
 export interface PriceRecurring {
@@ -47,4 +49,5 @@ export type StripePriceInput = {
   description?: string;
   features?: string[];
   token?: number;
+  featureIds?: string[]; // Feature entity IDs to link (Neo4j only, NOT sent to Stripe)
 };

package/src/features/billing/stripe-price/data/stripe-price.ts

@@ -1,5 +1,6 @@
 import { AbstractApiData, JsonApiHydratedDataInterface, Modules } from "../../../../core";
 import { StripeProductInterface } from "../../stripe-product";
+import { FeatureInterface } from "../../../feature";
 import { PriceRecurring, StripePriceInput, StripePriceInterface } from "./stripe-price.interface";
 
 export class StripePrice extends AbstractApiData implements StripePriceInterface {
@@ -17,6 +18,7 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
   private _description?: string;
   private _features?: string[];
   private _token?: number;
+  private _priceFeatures: FeatureInterface[] = []; // Platform Feature entities
 
   get stripePriceId(): string {
     if (!this._stripePriceId) throw new Error("stripePriceId is not defined");
@@ -78,6 +80,10 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
     return this._token;
   }
 
+  get priceFeatures(): FeatureInterface[] {
+    return this._priceFeatures;
+  }
+
   rehydrate(data: JsonApiHydratedDataInterface): this {
     super.rehydrate(data);
 
@@ -118,6 +124,9 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
     // Hydrate product relationship
     this._product = this._readIncluded(data, "product", Modules.StripeProduct) as StripeProductInterface;
 
+    // Hydrate feature relationship (JSON:API key is "features")
+    this._priceFeatures = this._readIncluded(data, "features", Modules.Feature) as FeatureInterface[];
+
     return this;
   }
 
@@ -161,6 +170,15 @@ export class StripePrice extends AbstractApiData implements StripePriceInterface
       response.data.attributes.token = data.token;
     }
 
+    // Convert featureIds to JSON:API relationships format
+    if (data.featureIds && data.featureIds.length > 0) {
+      response.data.relationships = response.data.relationships || {};
+      response.data.relationships.features = data.featureIds.map((id) => ({
+        type: Modules.Feature.name,
+        id,
+      }));
+    }
+
     return response;
   }
 }

package/src/features/billing/stripe-subscription/components/containers/SubscriptionsContainer.tsx

@@ -9,9 +9,10 @@ import { SubscriptionsList } from "../lists";
 
 type SubscriptionsContainerProps = {
   onOpenWizard?: (subscription?: StripeSubscriptionInterface) => void;
+  hasActiveRecurringSubscription?: boolean;
 };
 
-export function SubscriptionsContainer({ onOpenWizard }: SubscriptionsContainerProps) {
+export function SubscriptionsContainer({ onOpenWizard, hasActiveRecurringSubscription }: SubscriptionsContainerProps) {
   const [subscriptions, setSubscriptions] = useState<StripeSubscriptionInterface[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -57,7 +58,9 @@ export function SubscriptionsContainer({ onOpenWizard }: SubscriptionsContainerP
           <h1 className="text-3xl font-bold">Subscriptions</h1>
         </div>
         {subscriptions.length > 0 && (
-          <Button onClick={() => onOpenWizard?.()}>Subscribe to a Plan</Button>
+          <Button onClick={() => onOpenWizard?.()}>
+            {hasActiveRecurringSubscription ? "Purchase Add-ons" : "Subscribe to a Plan"}
+          </Button>
         )}
       </div>
 

package/src/features/billing/stripe-subscription/components/forms/CancelSubscriptionDialog.tsx

@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { z } from "zod";
-import { FormCheckbox, FormTextarea } from "../../../../../components";
+import { FormTextarea } from "../../../../../components";
 import {
   Button,
   Dialog,
@@ -25,7 +25,6 @@ type CancelSubscriptionDialogProps = {
 };
 
 const formSchema = z.object({
-  cancelImmediately: z.boolean(),
   reason: z.string().optional(),
 });
 
@@ -40,20 +39,17 @@ export function CancelSubscriptionDialog({
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
-      cancelImmediately: false,
       reason: "",
     },
   });
 
-  const cancelImmediately = form.watch("cancelImmediately");
-
   const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values) => {
     setIsSubmitting(true);
 
     try {
       await StripeSubscriptionService.cancelSubscription({
         id: subscription.id,
-        cancelImmediately: values.cancelImmediately,
+        cancelImmediately: false,
       });
 
       onSuccess();
@@ -79,18 +75,9 @@ export function CancelSubscriptionDialog({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
-            <FormCheckbox form={form} id="cancelImmediately" name="Cancel Immediately" />
-
-            {cancelImmediately ? (
-              <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-800">
-                Your subscription will be canceled immediately and you will lose access right away.
-              </div>
-            ) : (
-              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
-                Your subscription will remain active until {periodEndDate}. You can continue using the service until
-                then.
-              </div>
-            )}
+            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-800">
+              Your subscription will remain active until {periodEndDate}. You can continue using the service until then.
+            </div>
 
             <FormTextarea
               form={form}

package/src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx

@@ -53,7 +53,7 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
 
   return (
     <>
-      <div className="border rounded-lg overflow-hidden">
+      <div className="border rounded-lg overflow-clip">
         <Table>
           <TableHeader className="bg-muted">
             <TableRow>

package/src/features/billing/stripe-subscription/components/widgets/ProductPricingList.tsx

@@ -15,6 +15,7 @@ export type ProductPricingListProps = {
   loading?: boolean;
   onSelectPrice: (price: StripePriceInterface) => void;
   hideRecurringPrices?: boolean;
+  hideOneTimePrices?: boolean;
 };
 
 function isRecurringProduct(prices: StripePriceInterface[]): boolean {
@@ -49,6 +50,7 @@ export function ProductPricingList({
   loading = false,
   onSelectPrice,
   hideRecurringPrices = false,
+  hideOneTimePrices = false,
 }: ProductPricingListProps) {
   if (loading) {
     return <ProductPricingListSkeleton />;
@@ -66,21 +68,23 @@ export function ProductPricingList({
     return 0;
   });
 
-  // Filter products based on hideRecurringPrices
-  const filteredProducts = hideRecurringPrices
-    ? sortedProducts
-        .map((product) => ({
-          ...product,
-          stripePrices: (product.stripePrices || []).filter((price) => price.priceType !== "recurring"),
-        }))
-        .filter((product) => product.stripePrices.length > 0)
-    : sortedProducts;
-
   return (
     <div className="space-y-6">
-      {filteredProducts.map((product) => {
+      {sortedProducts.map((product) => {
         const allPrices = product.stripePrices || [];
-        const filteredPrices = getFilteredPrices(allPrices, selectedInterval);
+
+        // Filter prices based on hideRecurringPrices and hideOneTimePrices flags
+        let pricesToFilter = allPrices;
+
+        if (hideRecurringPrices) {
+          pricesToFilter = pricesToFilter.filter((price) => price.priceType !== "recurring");
+        }
+
+        if (hideOneTimePrices) {
+          pricesToFilter = pricesToFilter.filter((price) => price.priceType !== "one_time");
+        }
+
+        const filteredPrices = getFilteredPrices(pricesToFilter, selectedInterval);
 
         if (filteredPrices.length === 0) {
           return null;

package/src/features/billing/stripe-subscription/components/wizards/SubscriptionWizard.tsx

@@ -59,10 +59,20 @@ export function SubscriptionWizard({
     }
   }, [open, actions.reset]);
 
-  const dialogTitle = subscription ? "Change Subscription Plan" : "Subscribe to a Plan";
+  const isPurchasingAddons = hasActiveRecurringSubscription && !subscription;
+  const isChangePlanMode = !!subscription;
+
+  const dialogTitle = subscription
+    ? "Change Subscription Plan"
+    : isPurchasingAddons
+      ? "Purchase Add-ons"
+      : "Subscribe to a Plan";
+
   const dialogDescription = subscription
     ? "Select a new plan for your subscription"
-    : "Choose a subscription plan to get started";
+    : isPurchasingAddons
+      ? "Select one-time products to purchase"
+      : "Choose a subscription plan to get started";
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -79,7 +89,8 @@ export function SubscriptionWizard({
             selectedPrice={state.selectedPrice}
             selectedInterval={state.selectedInterval}
             currentPriceId={subscription?.price?.id}
-            hideRecurringPrices={hasActiveRecurringSubscription && !subscription}
+            hideRecurringPrices={isPurchasingAddons}
+            hideOneTimePrices={isChangePlanMode}
             onSelectPrice={actions.selectPrice}
             onIntervalChange={actions.setInterval}
             onNext={actions.goToReview}

package/src/features/billing/stripe-subscription/components/wizards/WizardStepPlanSelection.tsx

@@ -12,6 +12,7 @@ type WizardStepPlanSelectionProps = {
   selectedInterval: BillingInterval;
   currentPriceId?: string;
   hideRecurringPrices: boolean;
+  hideOneTimePrices: boolean;
   onSelectPrice: (price: StripePriceInterface) => void;
   onIntervalChange: (interval: BillingInterval) => void;
   onNext: () => void;
@@ -23,6 +24,7 @@ export function WizardStepPlanSelection({
   selectedInterval,
   currentPriceId,
   hideRecurringPrices,
+  hideOneTimePrices,
   onSelectPrice,
   onIntervalChange,
   onNext,
@@ -71,15 +73,17 @@ export function WizardStepPlanSelection({
 
   return (
     <div className="space-y-6">
-      {/* Interval Toggle */}
-      <div className="flex justify-center">
-        <IntervalToggle
-          value={selectedInterval}
-          onChange={onIntervalChange}
-          hasMonthly={hasMonthly}
-          hasYearly={hasYearly}
-        />
-      </div>
+      {/* Interval Toggle - only show for recurring products */}
+      {!hideRecurringPrices && (
+        <div className="flex justify-center">
+          <IntervalToggle
+            value={selectedInterval}
+            onChange={onIntervalChange}
+            hasMonthly={hasMonthly}
+            hasYearly={hasYearly}
+          />
+        </div>
+      )}
 
       {/* Product Pricing List */}
       <ProductPricingList
@@ -89,6 +93,7 @@ export function WizardStepPlanSelection({
         selectedPriceId={selectedPrice?.id}
         loading={loading}
         hideRecurringPrices={hideRecurringPrices}
+        hideOneTimePrices={hideOneTimePrices}
         onSelectPrice={handleSelectPrice}
       />
 

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -77,7 +77,7 @@ export function WizardStepReview({
           <div className="flex justify-between text-sm">
             <span className="text-blue-600">Amount due now:</span>
             <span className="font-medium text-blue-800">
-              {formatCurrency(prorationPreview.amountDue, prorationPreview.currency)}
+              {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
             </span>
           </div>
         </div>

package/src/features/billing/stripe-subscription/data/stripe-subscription.service.ts

@@ -89,7 +89,7 @@ export class StripeSubscriptionService extends AbstractService {
 
     return this.callApi<StripeSubscriptionInterface>({
       type: Modules.StripeSubscription,
-      method: HttpMethod.PUT,
+      method: HttpMethod.POST,
       endpoint: endpoint.generate(),
       input: params,
     });
@@ -109,7 +109,7 @@ export class StripeSubscriptionService extends AbstractService {
       childEndpoint: "proration-preview",
     });
 
-    endpoint.addAdditionalParam("newPriceId", params.newPriceId);
+    endpoint.addAdditionalParam("priceId", params.newPriceId);
     if (params.quantity) {
       endpoint.addAdditionalParam("quantity", params.quantity.toString());
     }

package/src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx

@@ -40,7 +40,7 @@ export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
   return (
     <div className="flex w-full flex-col gap-y-4">
       <h2 className="text-xl font-semibold">Usage History</h2>
-      <div className="overflow-hidden rounded-lg border">
+      <div className="overflow-clip rounded-lg border">
         <Table>
           <TableHeader className="bg-muted">
             <TableRow>

package/src/features/company/components/details/TokenStatusIndicator.tsx

@@ -63,22 +63,20 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
   const getBatteryIcon = () => {
     if (percentage > 75) {
       return <BatteryFull className={cn(iconSize, "text-green-500")} />;
+    } else if (percentage > 50) {
+      return <BatteryMedium className={cn(iconSize, "text-green-500")} />;
     } else if (percentage >= 25) {
-      return <BatteryMedium className={cn(iconSize, "text-yellow-500")} />;
-    } else if (percentage >= 5) {
-      return <BatteryLow className={cn(iconSize, "text-orange-500")} />;
+      return <BatteryLow className={cn(iconSize, "text-yellow-500")} />;
     } else {
       return <Battery className={cn(iconSize, "text-destructive")} />;
     }
   };
 
   const getStatusColor = () => {
-    if (percentage > 75) {
+    if (percentage > 50) {
       return "text-green-500";
     } else if (percentage >= 25) {
       return "text-yellow-500";
-    } else if (percentage >= 5) {
-      return "text-orange-500";
     } else {
       return "text-destructive";
     }

package/src/features/company/hooks/useSubscriptionStatus.ts

@@ -2,6 +2,7 @@
 
 import { useMemo } from "react";
 import { useCurrentUserContext } from "../../user/contexts/CurrentUserContext";
+import { getRoleId, isRolesConfigured } from "../../../roles";
 
 export interface TrialSubscriptionStatus {
   status: "loading" | "trial" | "active" | "expired";
@@ -14,6 +15,12 @@ export interface TrialSubscriptionStatus {
 const TRIAL_DAYS = 14;
 const GRACE_DAYS = 3;
 
+const isAdministrator = (currentUser: any): boolean => {
+  if (!currentUser || !isRolesConfigured()) return false;
+  const adminRoleId = getRoleId().Administrator;
+  return !!currentUser.roles?.some((role: any) => role.id === adminRoleId);
+};
+
 export function useSubscriptionStatus(): TrialSubscriptionStatus {
   const { company, currentUser } = useCurrentUserContext();
 
@@ -29,6 +36,17 @@ export function useSubscriptionStatus(): TrialSubscriptionStatus {
       };
     }
 
+    // Administrator users are never blocked by trial
+    if (isAdministrator(currentUser)) {
+      return {
+        status: "active",
+        trialEndsAt: null,
+        daysRemaining: 0,
+        isGracePeriod: false,
+        isBlocked: false,
+      };
+    }
+
     // No company after loading = blocked
     if (!company) {
       return {

package/src/features/content/hooks/useContentTableStructure.tsx

@@ -73,7 +73,7 @@ export const useContentTableStructure = <U extends string = ContentFields>(
         const response = `${content.relevance.toFixed(0)}%`;
 
         return (
-          <div className="relative flex h-5 w-20 items-center justify-center overflow-hidden rounded border text-center">
+          <div className="relative flex h-5 w-20 items-center justify-center overflow-clip rounded border text-center">
             <div
               className={`bg-accent absolute top-0 left-0 h-full opacity-${Math.round(content.relevance)}`}
               style={{ width: `${content.relevance}%` }}

package/src/features/user/contexts/CurrentUserContext.tsx

@@ -5,6 +5,7 @@ import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { usePathname } from "next/navigation";
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useSocketContext } from "../../../contexts/SocketContext";
 import { Modules, rehydrate } from "../../../core";
 import { Action, checkPermissions, ModuleWithPermissions } from "../../../permissions";
 import { getRoleId } from "../../../roles";
@@ -12,7 +13,6 @@ import { CompanyInterface } from "../../company/data/company.interface";
 import { FeatureInterface } from "../../feature";
 import { RoleInterface } from "../../role";
 import { UserInterface, UserService } from "../data";
-import { useSocketContext } from "../../../contexts/SocketContext";
 
 export interface CurrentUserContextType<T extends UserInterface = UserInterface> {
   currentUser: T | null;
@@ -143,6 +143,7 @@ export const CurrentUserProvider = ({ children }: { children: React.ReactNode })
       const fullUser = await UserService.findFullUser();
       if (fullUser) {
         setDehydratedUser(fullUser.dehydrate() as any);
+        setUser(fullUser);
       }
     } catch (error) {
       console.error("Failed to refresh user data:", error);

package/src/features/user/hooks/useUserTableStructure.tsx

@@ -80,7 +80,7 @@ export const useUserTableStructure: UseTableStructureHook<UserInterface, UserFie
         const response = `${user.relevance.toFixed(0)}%`;
 
         return (
-          <div className="relative flex h-5 w-20 items-center justify-center overflow-hidden rounded border text-center">
+          <div className="relative flex h-5 w-20 items-center justify-center overflow-clip rounded border text-center">
             <div
               className={`bg-accent absolute top-0 left-0 h-full opacity-${Math.round(user.relevance)}`}
               style={{ width: `${user.relevance}%` }}