christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:45:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

ui: fix modal z-index conflict in Experiments tab

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-02-21 11:19:43 +01:00
parent 8d05173b40
commit b1346183c9
2 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ExperimentDetail.tsx
+3 -3
View File
@@ -66,7 +66,7 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
if (!experimentId) return null; if (!experimentId) return null;
return ( return (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
<div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col"> <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-6 border-b border-slate-700"> <div className="flex items-center justify-between p-6 border-b border-slate-700">
@@ -149,14 +149,14 @@ const ExperimentDetail: React.FC<ExperimentDetailProps> = ({ experimentId, onClo
/> />
<PerformanceCard <PerformanceCard
label="Lift" label="Lift"
value={experiment.actual_lift_percent !== undefined value={experiment.actual_lift_percent !== undefined
? `${experiment.actual_lift_percent >= 0 ? '+' : ''}${experiment.actual_lift_percent}%` ? `${experiment.actual_lift_percent >= 0 ? '+' : ''}${experiment.actual_lift_percent}%`
: '—'} : '—'}
color={experiment.actual_lift_percent && experiment.actual_lift_percent >= 0 ? 'emerald' : 'red'} color={experiment.actual_lift_percent && experiment.actual_lift_percent >= 0 ? 'emerald' : 'red'}
/> />
<PerformanceCard <PerformanceCard
label="Statistical Significance" label="Statistical Significance"
value={experiment.statistical_significance value={experiment.statistical_significance
? `${(experiment.statistical_significance * 100).toFixed(1)}%` ? `${(experiment.statistical_significance * 100).toFixed(1)}%`
: '—'} : '—'}
color="purple" color="purple"
components/ExperimentForm.tsx
+6 -8
View File
@@ -44,7 +44,7 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
.split(/[\s,]+/) // Split by space or comma .split(/[\s,]+/) // Split by space or comma
.map(a => a.trim().toUpperCase()) .map(a => a.trim().toUpperCase())
.filter(a => a.length > 0 && /^[A-Z0-9]{9,10}$/.test(a)); // Validate ASIN format .filter(a => a.length > 0 && /^[A-Z0-9]{9,10}$/.test(a)); // Validate ASIN format
const uniqueAsins = Array.from(new Set([...formData.asins, ...newAsins])); const uniqueAsins = Array.from(new Set([...formData.asins, ...newAsins]));
setFormData({ ...formData, asins: uniqueAsins }); setFormData({ ...formData, asins: uniqueAsins });
setAsinInput(''); setAsinInput('');
@@ -95,7 +95,7 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
const marketplaceOptions = ['DE', 'UK', 'FR', 'IT', 'ES']; const marketplaceOptions = ['DE', 'UK', 'FR', 'IT', 'ES'];
return ( return (
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"> <div className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4">
<div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col"> <div className="bg-slate-900 border border-slate-700 rounded-2xl w-full max-w-3xl max-h-[85vh] overflow-hidden flex flex-col">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-4 border-b border-slate-700"> <div className="flex items-center justify-between p-4 border-b border-slate-700">
@@ -173,11 +173,10 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
setFormData({ ...formData, asins: [] }); setFormData({ ...formData, asins: [] });
setSelectedLine(''); setSelectedLine('');
}} }}
className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${ className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'asin'
targetType === 'asin'
? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
: 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500' : 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
}`} }`}
> >
🎯 Specific ASINs 🎯 Specific ASINs
</button> </button>
@@ -188,11 +187,10 @@ const ExperimentForm: React.FC<ExperimentFormProps> = ({
setFormData({ ...formData, asins: [] }); setFormData({ ...formData, asins: [] });
setAsinInput(''); setAsinInput('');
}} }}
className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${ className={`flex-1 px-3 py-2 rounded-lg text-xs font-bold border transition-all ${targetType === 'line'
targetType === 'line'
? 'bg-indigo-600/20 border-indigo-500 text-indigo-400' ? 'bg-indigo-600/20 border-indigo-500 text-indigo-400'
: 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500' : 'bg-slate-800 border-slate-600 text-slate-400 hover:border-slate-500'
}`} }`}
> >
📦 Entire Product Line 📦 Entire Product Line
</button> </button>