snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.stories.tsx

@@ -0,0 +1,9 @@
+import SeatsCapUsage from './SeatsCapUsage';
+
+export default {
+	component: SeatsCapUsage,
+};
+
+export const Example = () => <SeatsCapUsage members={150} limit={300} />;
+export const CloseToLimit = () => <SeatsCapUsage members={270} limit={300} />;
+export const ReachedLimit = () => <SeatsCapUsage members={300} limit={300} />;

apps/meteor/client/views/admin/users/SeatsCapUsage/SeatsCapUsage.tsx

@@ -0,0 +1,26 @@
+import { useTranslation } from 'react-i18next';
+
+import { GenericResourceUsage } from '../../../../components/GenericResourceUsage';
+
+export type SeatsCapUsageProps = {
+	limit: number;
+	members: number;
+};
+
+const SeatsCapUsage = ({ limit, members }: SeatsCapUsageProps) => {
+	const { t } = useTranslation();
+	const percentage = Math.max(0, Math.min((100 / limit) * members, 100));
+	const seatsLeft = Math.max(0, limit - members);
+
+	return (
+		<GenericResourceUsage
+			title={t('Seats_Available', { seatsLeft })}
+			value={members}
+			max={limit}
+			percentage={percentage}
+			data-testid='seats-cap-progress-bar'
+		/>
+	);
+};
+
+export default SeatsCapUsage;

apps/meteor/client/views/admin/users/SeatsCapUsage/index.ts

@@ -0,0 +1 @@
+export { default } from './SeatsCapUsage';