refactor: remove routine_role, recommended_frequency, evidence_level, cumulative_with
Drop fields identified as redundant or low-value from the Product model, API schemas, frontend types, and forms. Raise effect_profile threshold in to_llm_context() from >0 to >=2 to suppress noise values. Remove sku/barcode from LLM context output (kept on model for catalog use). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
9bf94a979c
commit
9a069508af
9 changed files with 464 additions and 142 deletions
|
|
@ -3,7 +3,6 @@
|
|||
export type AbsorptionSpeed = 'very_fast' | 'fast' | 'moderate' | 'slow' | 'very_slow';
|
||||
export type BarrierState = 'intact' | 'mildly_compromised' | 'compromised';
|
||||
export type DayTime = 'am' | 'pm' | 'both';
|
||||
export type EvidenceLevel = 'low' | 'mixed' | 'moderate' | 'high';
|
||||
export type GroomingAction = 'shaving_razor' | 'shaving_oneblade' | 'dermarolling';
|
||||
export type IngredientFunction =
|
||||
| 'humectant'
|
||||
|
|
@ -44,14 +43,6 @@ export type ProductCategory =
|
|||
| 'spot_treatment'
|
||||
| 'oil';
|
||||
export type ResultFlag = 'N' | 'ABN' | 'POS' | 'NEG' | 'L' | 'H';
|
||||
export type RoutineRole =
|
||||
| 'cleanse'
|
||||
| 'prepare'
|
||||
| 'treatment_active'
|
||||
| 'treatment_support'
|
||||
| 'seal'
|
||||
| 'protect'
|
||||
| 'hair_treatment';
|
||||
export type SkinConcern =
|
||||
| 'acne'
|
||||
| 'rosacea'
|
||||
|
|
@ -68,15 +59,6 @@ export type SkinTrend = 'improving' | 'stable' | 'worsening' | 'fluctuating';
|
|||
export type SkinType = 'dry' | 'oily' | 'combination' | 'sensitive' | 'normal' | 'acne_prone';
|
||||
export type StrengthLevel = 1 | 2 | 3;
|
||||
export type TextureType = 'watery' | 'gel' | 'emulsion' | 'cream' | 'oil' | 'balm' | 'foam' | 'fluid';
|
||||
export type UsageFrequency =
|
||||
| 'daily'
|
||||
| 'twice_daily'
|
||||
| 'every_other_day'
|
||||
| 'twice_weekly'
|
||||
| 'three_times_weekly'
|
||||
| 'weekly'
|
||||
| 'as_needed';
|
||||
|
||||
// ─── Product types ───────────────────────────────────────────────────────────
|
||||
|
||||
export interface ActiveIngredient {
|
||||
|
|
@ -85,7 +67,6 @@ export interface ActiveIngredient {
|
|||
functions: IngredientFunction[];
|
||||
strength_level?: StrengthLevel;
|
||||
irritation_potential?: StrengthLevel;
|
||||
cumulative_with?: IngredientFunction[];
|
||||
}
|
||||
|
||||
export interface ProductEffectProfile {
|
||||
|
|
@ -140,7 +121,6 @@ export interface Product {
|
|||
url?: string;
|
||||
barcode?: string;
|
||||
category: ProductCategory;
|
||||
routine_role: RoutineRole;
|
||||
recommended_time: DayTime;
|
||||
texture?: TextureType;
|
||||
absorption_speed?: AbsorptionSpeed;
|
||||
|
|
@ -151,12 +131,9 @@ export interface Product {
|
|||
inci: string[];
|
||||
actives?: ActiveIngredient[];
|
||||
recommended_for: SkinType[];
|
||||
recommended_frequency?: UsageFrequency;
|
||||
targets: SkinConcern[];
|
||||
contraindications: string[];
|
||||
usage_notes?: string;
|
||||
evidence_level?: EvidenceLevel;
|
||||
claims: string[];
|
||||
fragrance_free?: boolean;
|
||||
essential_oils_free?: boolean;
|
||||
alcohol_denat_free?: boolean;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@
|
|||
<div class="grid grid-cols-2 gap-2">
|
||||
<span class="text-muted-foreground">Brand</span><span>{product.brand}</span>
|
||||
<span class="text-muted-foreground">Line</span><span>{product.line_name ?? '—'}</span>
|
||||
<span class="text-muted-foreground">Routine role</span><span>{product.routine_role.replace(/_/g, ' ')}</span>
|
||||
<span class="text-muted-foreground">Time</span><span class="uppercase">{product.recommended_time}</span>
|
||||
<span class="text-muted-foreground">Leave-on</span><span>{product.leave_on ? 'Yes' : 'No'}</span>
|
||||
<span class="text-muted-foreground">Texture</span><span>{product.texture ?? '—'}</span>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,29 @@ export const load: PageServerLoad = async () => {
|
|||
return {};
|
||||
};
|
||||
|
||||
function parseOptionalFloat(v: string | null): number | undefined {
|
||||
if (!v) return undefined;
|
||||
const n = parseFloat(v);
|
||||
return isNaN(n) ? undefined : n;
|
||||
}
|
||||
|
||||
function parseOptionalInt(v: string | null): number | undefined {
|
||||
if (!v) return undefined;
|
||||
const n = parseInt(v, 10);
|
||||
return isNaN(n) ? undefined : n;
|
||||
}
|
||||
|
||||
function parseTristate(v: string | null): boolean | undefined {
|
||||
if (v === 'true') return true;
|
||||
if (v === 'false') return false;
|
||||
return undefined;
|
||||
}
|
||||
|
||||
function parseOptionalString(v: string | null): string | undefined {
|
||||
const s = v?.trim();
|
||||
return s || undefined;
|
||||
}
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request }) => {
|
||||
const form = await request.formData();
|
||||
|
|
@ -14,29 +37,110 @@ export const actions: Actions = {
|
|||
const brand = form.get('brand') as string;
|
||||
const category = form.get('category') as string;
|
||||
const recommended_time = form.get('recommended_time') as string;
|
||||
const routine_role = form.get('routine_role') as string;
|
||||
const leave_on = form.get('leave_on') === 'true';
|
||||
|
||||
if (!name || !brand || !category || !recommended_time || !routine_role) {
|
||||
if (!name || !brand || !category || !recommended_time) {
|
||||
return fail(400, { error: 'Required fields missing' });
|
||||
}
|
||||
|
||||
const targets = (form.get('targets') as string)
|
||||
?.split(',')
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean) ?? [];
|
||||
const leave_on = form.get('leave_on') === 'true';
|
||||
|
||||
// Lists from checkboxes
|
||||
const recommended_for = form.getAll('recommended_for') as string[];
|
||||
const targets = form.getAll('targets') as string[];
|
||||
|
||||
// INCI: split on newlines and commas
|
||||
const inci_raw = form.get('inci') as string;
|
||||
const inci = inci_raw
|
||||
? inci_raw.split(/[\n,]/).map((s) => s.trim()).filter(Boolean)
|
||||
: [];
|
||||
|
||||
const payload: Record<string, unknown> = {
|
||||
name,
|
||||
brand,
|
||||
category,
|
||||
recommended_time,
|
||||
leave_on,
|
||||
recommended_for,
|
||||
targets,
|
||||
inci
|
||||
};
|
||||
|
||||
// Optional strings
|
||||
const optStrings: Array<[string, string]> = [
|
||||
['line_name', 'line_name'],
|
||||
['url', 'url'],
|
||||
['sku', 'sku'],
|
||||
['barcode', 'barcode'],
|
||||
['usage_notes', 'usage_notes'],
|
||||
['personal_tolerance_notes', 'personal_tolerance_notes']
|
||||
];
|
||||
for (const [field, key] of optStrings) {
|
||||
const v = parseOptionalString(form.get(field) as string | null);
|
||||
if (v !== undefined) payload[key] = v;
|
||||
}
|
||||
|
||||
// Optional enum selects (non-empty string = value chosen)
|
||||
const optEnums: Array<[string, string]> = [
|
||||
['texture', 'texture'],
|
||||
['absorption_speed', 'absorption_speed'],
|
||||
['price_tier', 'price_tier'],
|
||||
];
|
||||
for (const [field, key] of optEnums) {
|
||||
const v = form.get(field) as string | null;
|
||||
if (v) payload[key] = v;
|
||||
}
|
||||
|
||||
// Optional numbers
|
||||
const size_ml = parseOptionalFloat(form.get('size_ml') as string | null);
|
||||
if (size_ml !== undefined) payload.size_ml = size_ml;
|
||||
|
||||
const pao_months = parseOptionalInt(form.get('pao_months') as string | null);
|
||||
if (pao_months !== undefined) payload.pao_months = pao_months;
|
||||
|
||||
const ph_min = parseOptionalFloat(form.get('ph_min') as string | null);
|
||||
if (ph_min !== undefined) payload.ph_min = ph_min;
|
||||
|
||||
const ph_max = parseOptionalFloat(form.get('ph_max') as string | null);
|
||||
if (ph_max !== undefined) payload.ph_max = ph_max;
|
||||
|
||||
const min_interval_hours = parseOptionalInt(form.get('min_interval_hours') as string | null);
|
||||
if (min_interval_hours !== undefined) payload.min_interval_hours = min_interval_hours;
|
||||
|
||||
const max_frequency_per_week = parseOptionalInt(form.get('max_frequency_per_week') as string | null);
|
||||
if (max_frequency_per_week !== undefined) payload.max_frequency_per_week = max_frequency_per_week;
|
||||
|
||||
const personal_rating = parseOptionalInt(form.get('personal_rating') as string | null);
|
||||
if (personal_rating !== undefined) payload.personal_rating = personal_rating;
|
||||
|
||||
const needle_length_mm = parseOptionalFloat(form.get('needle_length_mm') as string | null);
|
||||
if (needle_length_mm !== undefined) payload.needle_length_mm = needle_length_mm;
|
||||
|
||||
// Booleans from checkboxes (unchecked = not sent = false)
|
||||
payload.is_medication = form.get('is_medication') === 'true';
|
||||
payload.is_tool = form.get('is_tool') === 'true';
|
||||
|
||||
// Nullable booleans (tristate)
|
||||
const fragranceFree = parseTristate(form.get('fragrance_free') as string | null);
|
||||
if (fragranceFree !== undefined) payload.fragrance_free = fragranceFree;
|
||||
|
||||
const essentialOilsFree = parseTristate(form.get('essential_oils_free') as string | null);
|
||||
if (essentialOilsFree !== undefined) payload.essential_oils_free = essentialOilsFree;
|
||||
|
||||
const alcoholDenatFree = parseTristate(form.get('alcohol_denat_free') as string | null);
|
||||
if (alcoholDenatFree !== undefined) payload.alcohol_denat_free = alcoholDenatFree;
|
||||
|
||||
const pregnancySafe = parseTristate(form.get('pregnancy_safe') as string | null);
|
||||
if (pregnancySafe !== undefined) payload.pregnancy_safe = pregnancySafe;
|
||||
|
||||
const personalRepurchaseIntent = parseTristate(
|
||||
form.get('personal_repurchase_intent') as string | null
|
||||
);
|
||||
if (personalRepurchaseIntent !== undefined)
|
||||
payload.personal_repurchase_intent = personalRepurchaseIntent;
|
||||
|
||||
let product;
|
||||
try {
|
||||
product = await createProduct({
|
||||
name,
|
||||
brand,
|
||||
category,
|
||||
recommended_time,
|
||||
routine_role,
|
||||
leave_on,
|
||||
targets
|
||||
});
|
||||
product = await createProduct(payload);
|
||||
} catch (e) {
|
||||
return fail(500, { error: (e as Error).message });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,29 +9,47 @@
|
|||
|
||||
let { form }: { form: ActionData } = $props();
|
||||
|
||||
// ── enum options ──────────────────────────────────────────────────────────
|
||||
const categories = [
|
||||
'cleanser', 'toner', 'essence', 'serum', 'moisturizer',
|
||||
'spf', 'mask', 'exfoliant', 'hair_treatment', 'tool', 'spot_treatment', 'oil'
|
||||
];
|
||||
const routineRoles = [
|
||||
'cleanse', 'prepare', 'treatment_active', 'treatment_support',
|
||||
'seal', 'protect', 'hair_treatment'
|
||||
];
|
||||
const textures = ['watery', 'gel', 'emulsion', 'cream', 'oil', 'balm', 'foam', 'fluid'];
|
||||
const absorptionSpeeds = ['very_fast', 'fast', 'moderate', 'slow', 'very_slow'];
|
||||
const priceTiers = ['budget', 'mid', 'premium', 'luxury'];
|
||||
const skinTypes = ['dry', 'oily', 'combination', 'sensitive', 'normal', 'acne_prone'];
|
||||
const skinConcerns = [
|
||||
'acne', 'rosacea', 'hyperpigmentation', 'aging', 'dehydration',
|
||||
'redness', 'damaged_barrier', 'pore_visibility', 'uneven_texture',
|
||||
'hair_growth', 'sebum_excess'
|
||||
];
|
||||
const tristateOptions = [
|
||||
{ value: '', label: 'Unknown' },
|
||||
{ value: 'true', label: 'Yes' },
|
||||
{ value: 'false', label: 'No' }
|
||||
];
|
||||
|
||||
// ── controlled select state ───────────────────────────────────────────────
|
||||
let category = $state('');
|
||||
let routineRole = $state('');
|
||||
let recommendedTime = $state('');
|
||||
let leaveOn = $state('true');
|
||||
let texture = $state('');
|
||||
let absorptionSpeed = $state('');
|
||||
let priceTier = $state('');
|
||||
let fragranceFree = $state('');
|
||||
let essentialOilsFree = $state('');
|
||||
let alcoholDenatFree = $state('');
|
||||
let pregnancySafe = $state('');
|
||||
let personalRepurchaseIntent = $state('');
|
||||
|
||||
function label(val: string) {
|
||||
return val.replace(/_/g, ' ');
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>New Product — innercontext</title></svelte:head>
|
||||
|
||||
<div class="max-w-xl space-y-6">
|
||||
<div class="max-w-2xl space-y-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<a href="/products" class="text-sm text-muted-foreground hover:underline">← Products</a>
|
||||
<h2 class="text-2xl font-bold tracking-tight">New Product</h2>
|
||||
|
|
@ -43,85 +61,348 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Product details</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<form method="POST" use:enhance class="space-y-5">
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Name *</Label>
|
||||
<Input id="name" name="name" required placeholder="e.g. Hydro Boost Water Gel" />
|
||||
<form method="POST" use:enhance class="space-y-6">
|
||||
|
||||
<!-- ── Basic info ─────────────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Basic info</CardTitle></CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="name">Name *</Label>
|
||||
<Input id="name" name="name" required placeholder="e.g. Hydro Boost Water Gel" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="brand">Brand *</Label>
|
||||
<Input id="brand" name="brand" required placeholder="e.g. Neutrogena" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="brand">Brand *</Label>
|
||||
<Input id="brand" name="brand" required placeholder="e.g. Neutrogena" />
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="line_name">Line / series</Label>
|
||||
<Input id="line_name" name="line_name" placeholder="e.g. Hydro Boost" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="url">URL</Label>
|
||||
<Input id="url" name="url" type="url" placeholder="https://…" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="sku">SKU</Label>
|
||||
<Input id="sku" name="sku" placeholder="e.g. NTR-HB-50" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="barcode">Barcode / EAN</Label>
|
||||
<Input id="barcode" name="barcode" placeholder="e.g. 3614273258975" />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- ── Classification ─────────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Classification</CardTitle></CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label>Category *</Label>
|
||||
<input type="hidden" name="category" value={category} />
|
||||
<Select type="single" value={category} onValueChange={(v) => (category = v)}>
|
||||
<SelectTrigger>{category ? category.replace(/_/g, ' ') : 'Select category'}</SelectTrigger>
|
||||
<SelectTrigger>{category ? label(category) : 'Select category'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each categories as cat}
|
||||
<SelectItem value={cat}>{cat.replace(/_/g, ' ')}</SelectItem>
|
||||
<SelectItem value={cat}>{label(cat)}</SelectItem>
|
||||
{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label>Time *</Label>
|
||||
<input type="hidden" name="recommended_time" value={recommendedTime} />
|
||||
<Select type="single" value={recommendedTime} onValueChange={(v) => (recommendedTime = v)}>
|
||||
<SelectTrigger>{recommendedTime ? recommendedTime.toUpperCase() : 'AM / PM / Both'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="am">AM</SelectItem>
|
||||
<SelectItem value="pm">PM</SelectItem>
|
||||
<SelectItem value="both">Both</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Leave-on *</Label>
|
||||
<input type="hidden" name="leave_on" value={leaveOn} />
|
||||
<Select type="single" value={leaveOn} onValueChange={(v) => (leaveOn = v)}>
|
||||
<SelectTrigger>{leaveOn === 'true' ? 'Yes (leave-on)' : 'No (rinse-off)'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="true">Yes (leave-on)</SelectItem>
|
||||
<SelectItem value="false">No (rinse-off)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Texture</Label>
|
||||
<input type="hidden" name="texture" value={texture} />
|
||||
<Select type="single" value={texture} onValueChange={(v) => (texture = v)}>
|
||||
<SelectTrigger>{texture ? label(texture) : 'Select texture'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each textures as t}
|
||||
<SelectItem value={t}>{label(t)}</SelectItem>
|
||||
{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Routine role *</Label>
|
||||
<input type="hidden" name="routine_role" value={routineRole} />
|
||||
<Select type="single" value={routineRole} onValueChange={(v) => (routineRole = v)}>
|
||||
<SelectTrigger>{routineRole ? routineRole.replace(/_/g, ' ') : 'Select role'}</SelectTrigger>
|
||||
<Label>Absorption speed</Label>
|
||||
<input type="hidden" name="absorption_speed" value={absorptionSpeed} />
|
||||
<Select type="single" value={absorptionSpeed} onValueChange={(v) => (absorptionSpeed = v)}>
|
||||
<SelectTrigger>{absorptionSpeed ? label(absorptionSpeed) : 'Select speed'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each routineRoles as role}
|
||||
<SelectItem value={role}>{role.replace(/_/g, ' ')}</SelectItem>
|
||||
{#each absorptionSpeeds as s}
|
||||
<SelectItem value={s}>{label(s)}</SelectItem>
|
||||
{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- ── Skin profile ───────────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Skin profile</CardTitle></CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label>Recommended time *</Label>
|
||||
<input type="hidden" name="recommended_time" value={recommendedTime} />
|
||||
<Select type="single" value={recommendedTime} onValueChange={(v) => (recommendedTime = v)}>
|
||||
<SelectTrigger>{recommendedTime ? recommendedTime.toUpperCase() : 'AM / PM / Both'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="am">AM</SelectItem>
|
||||
<SelectItem value="pm">PM</SelectItem>
|
||||
<SelectItem value="both">Both</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Label>Recommended for skin types</Label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
{#each skinTypes as st}
|
||||
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input type="checkbox" name="recommended_for" value={st} class="rounded border-input" />
|
||||
{label(st)}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Leave-on?</Label>
|
||||
<input type="hidden" name="leave_on" value={leaveOn} />
|
||||
<Select type="single" value={leaveOn} onValueChange={(v) => (leaveOn = v)}>
|
||||
<SelectTrigger>{leaveOn === 'true' ? 'Yes (leave-on)' : 'No (rinse-off)'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="true">Yes (leave-on)</SelectItem>
|
||||
<SelectItem value="false">No (rinse-off)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Label>Target concerns</Label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
{#each skinConcerns as sc}
|
||||
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input type="checkbox" name="targets" value={sc} class="rounded border-input" />
|
||||
{label(sc)}
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- ── Product details ────────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Product details</CardTitle></CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label>Price tier</Label>
|
||||
<input type="hidden" name="price_tier" value={priceTier} />
|
||||
<Select type="single" value={priceTier} onValueChange={(v) => (priceTier = v)}>
|
||||
<SelectTrigger>{priceTier ? label(priceTier) : 'Select tier'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each priceTiers as p}
|
||||
<SelectItem value={p}>{label(p)}</SelectItem>
|
||||
{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="size_ml">Size (ml)</Label>
|
||||
<Input id="size_ml" name="size_ml" type="number" min="0" step="0.1" placeholder="e.g. 50" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="pao_months">PAO (months)</Label>
|
||||
<Input id="pao_months" name="pao_months" type="number" min="1" max="60" placeholder="e.g. 12" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="ph_min">pH min</Label>
|
||||
<Input id="ph_min" name="ph_min" type="number" min="0" max="14" step="0.1" placeholder="e.g. 3.5" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="ph_max">pH max</Label>
|
||||
<Input id="ph_max" name="ph_max" type="number" min="0" max="14" step="0.1" placeholder="e.g. 4.5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- ── Safety flags ───────────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Safety flags</CardTitle></CardHeader>
|
||||
<CardContent>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label>Fragrance-free</Label>
|
||||
<input type="hidden" name="fragrance_free" value={fragranceFree} />
|
||||
<Select type="single" value={fragranceFree} onValueChange={(v) => (fragranceFree = v)}>
|
||||
<SelectTrigger>{fragranceFree === '' ? 'Unknown' : fragranceFree === 'true' ? 'Yes' : 'No'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each tristateOptions as opt}<SelectItem value={opt.value}>{opt.label}</SelectItem>{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Essential oils-free</Label>
|
||||
<input type="hidden" name="essential_oils_free" value={essentialOilsFree} />
|
||||
<Select type="single" value={essentialOilsFree} onValueChange={(v) => (essentialOilsFree = v)}>
|
||||
<SelectTrigger>{essentialOilsFree === '' ? 'Unknown' : essentialOilsFree === 'true' ? 'Yes' : 'No'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each tristateOptions as opt}<SelectItem value={opt.value}>{opt.label}</SelectItem>{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Alcohol denat-free</Label>
|
||||
<input type="hidden" name="alcohol_denat_free" value={alcoholDenatFree} />
|
||||
<Select type="single" value={alcoholDenatFree} onValueChange={(v) => (alcoholDenatFree = v)}>
|
||||
<SelectTrigger>{alcoholDenatFree === '' ? 'Unknown' : alcoholDenatFree === 'true' ? 'Yes' : 'No'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each tristateOptions as opt}<SelectItem value={opt.value}>{opt.label}</SelectItem>{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Pregnancy safe</Label>
|
||||
<input type="hidden" name="pregnancy_safe" value={pregnancySafe} />
|
||||
<Select type="single" value={pregnancySafe} onValueChange={(v) => (pregnancySafe = v)}>
|
||||
<SelectTrigger>{pregnancySafe === '' ? 'Unknown' : pregnancySafe === 'true' ? 'Yes' : 'No'}</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each tristateOptions as opt}<SelectItem value={opt.value}>{opt.label}</SelectItem>{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- ── Ingredients & notes ────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Ingredients & notes</CardTitle></CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="inci">INCI list (one ingredient per line)</Label>
|
||||
<textarea
|
||||
id="inci"
|
||||
name="inci"
|
||||
rows="4"
|
||||
placeholder="Aqua Glycerin Niacinamide"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="targets">Target concerns (comma-separated)</Label>
|
||||
<Input
|
||||
id="targets"
|
||||
name="targets"
|
||||
placeholder={skinConcerns.slice(0, 3).join(', ')}
|
||||
/>
|
||||
<Label for="usage_notes">Usage notes</Label>
|
||||
<textarea
|
||||
id="usage_notes"
|
||||
name="usage_notes"
|
||||
rows="2"
|
||||
placeholder="e.g. Apply to damp skin, avoid eye area"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
></textarea>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- ── Usage constraints ──────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Usage constraints</CardTitle></CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="min_interval_hours">Min interval (hours)</Label>
|
||||
<Input id="min_interval_hours" name="min_interval_hours" type="number" min="0" placeholder="e.g. 24" />
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<Label for="max_frequency_per_week">Max uses per week</Label>
|
||||
<Input id="max_frequency_per_week" name="max_frequency_per_week" type="number" min="1" max="14" placeholder="e.g. 3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 pt-2">
|
||||
<Button type="submit">Create product</Button>
|
||||
<Button variant="outline" href="/products">Cancel</Button>
|
||||
<div class="flex gap-6">
|
||||
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input type="checkbox" name="is_medication" value="true" class="rounded border-input" />
|
||||
Is medication
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input type="checkbox" name="is_tool" value="true" class="rounded border-input" />
|
||||
Is tool (e.g. dermaroller)
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="needle_length_mm">Needle length (mm, tools only)</Label>
|
||||
<Input id="needle_length_mm" name="needle_length_mm" type="number" min="0" step="0.01" placeholder="e.g. 0.25" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- ── Personal ───────────────────────────────────────────────────── -->
|
||||
<Card>
|
||||
<CardHeader><CardTitle>Personal notes</CardTitle></CardHeader>
|
||||
<CardContent class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<Label for="personal_rating">Personal rating (1–10)</Label>
|
||||
<Input id="personal_rating" name="personal_rating" type="number" min="1" max="10" placeholder="e.g. 8" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label>Repurchase intent</Label>
|
||||
<input type="hidden" name="personal_repurchase_intent" value={personalRepurchaseIntent} />
|
||||
<Select type="single" value={personalRepurchaseIntent} onValueChange={(v) => (personalRepurchaseIntent = v)}>
|
||||
<SelectTrigger>
|
||||
{personalRepurchaseIntent === '' ? 'Unknown' : personalRepurchaseIntent === 'true' ? 'Yes' : 'No'}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each tristateOptions as opt}
|
||||
<SelectItem value={opt.value}>{opt.label}</SelectItem>
|
||||
{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label for="personal_tolerance_notes">Tolerance notes</Label>
|
||||
<textarea
|
||||
id="personal_tolerance_notes"
|
||||
name="personal_tolerance_notes"
|
||||
rows="2"
|
||||
placeholder="e.g. Causes mild stinging, fine after 2 weeks"
|
||||
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
></textarea>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div class="flex gap-3 pb-6">
|
||||
<Button type="submit">Create product</Button>
|
||||
<Button variant="outline" href="/products">Cancel</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue