@@ -14,6 +14,7 @@ import {
1414 AlertCircle ,
1515 CalendarClock ,
1616 UserCheck ,
17+ Box ,
1718} from 'lucide-react' ;
1819import {
1920 useFeatureFlags ,
@@ -33,6 +34,7 @@ const ICON_MAP: Record<string, React.ComponentType<{ className?: string }>> = {
3334 AlertCircle,
3435 CalendarClock,
3536 UserCheck,
37+ Box,
3638} ;
3739
3840// Category labels and order
@@ -42,6 +44,11 @@ const CATEGORIES = [
4244 { key : 'admin' , labelKey : 'featureFlags.categories.admin' } ,
4345] as const ;
4446
47+ // External services category (shown separately with warning)
48+
49+ // Feature flags that require external services
50+ const EXTERNAL_SERVICE_FLAGS = [ 'advancedCAD' ] as const ;
51+
4552interface FeatureFlagItemProps {
4653 meta : FeatureFlagMeta ;
4754 enabled : boolean ;
@@ -52,14 +59,16 @@ interface FeatureFlagItemProps {
5259function FeatureFlagItem ( { meta, enabled, onToggle, disabled } : FeatureFlagItemProps ) {
5360 const { t } = useTranslation ( ) ;
5461 const Icon = ICON_MAP [ meta . icon ] || Activity ;
62+ const isExternalService = EXTERNAL_SERVICE_FLAGS . includes ( meta . key as typeof EXTERNAL_SERVICE_FLAGS [ number ] ) ;
5563
5664 return (
5765 < div
5866 className = { cn (
5967 'group flex items-center justify-between rounded-lg border p-4 transition-all duration-200' ,
6068 enabled
6169 ? 'border-primary/30 bg-primary/5 hover:border-primary/50'
62- : 'border-border/50 bg-muted/30 hover:border-border'
70+ : 'border-border/50 bg-muted/30 hover:border-border' ,
71+ isExternalService && 'border-dashed'
6372 ) }
6473 >
6574 < div className = "flex items-center gap-4" >
@@ -81,6 +90,11 @@ function FeatureFlagItem({ meta, enabled, onToggle, disabled }: FeatureFlagItemP
8190 ) } >
8291 { t ( meta . labelKey ) }
8392 </ span >
93+ { isExternalService && (
94+ < Badge variant = "outline" className = "text-[10px] px-1.5 py-0 border-amber-500/50 text-amber-600" >
95+ External
96+ </ Badge >
97+ ) }
8498 { enabled && (
8599 < Badge variant = "secondary" className = "text-[10px] px-1.5 py-0 bg-primary/20 text-primary border-0" >
86100 { t ( 'featureFlags.enabled' ) }
@@ -90,6 +104,11 @@ function FeatureFlagItem({ meta, enabled, onToggle, disabled }: FeatureFlagItemP
90104 < p className = "text-sm text-muted-foreground" >
91105 { t ( meta . descriptionKey ) }
92106 </ p >
107+ { isExternalService && (
108+ < p className = "text-xs text-amber-600/80 mt-1" >
109+ { t ( 'featureFlags.externalServiceNote' ) }
110+ </ p >
111+ ) }
93112 </ div >
94113 </ div >
95114 < Switch
0 commit comments