abrban/cloud-host
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Unify all dropdowns on the custom Select component.

Browse Source 
Replace every native <select> across the dashboard, admin pages, and
shared components with the custom Select used by the optional-service
version pickers, for consistent styling and mobile-safe anchoring. Add
a disabled prop to Select to cover the former read-only native cases.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
keyhan
2026-06-12 17:37:04 +03:30
parent aa7ff3d26d
commit 97cd5e989a
16 changed files with 664 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/[lang]/dashboard/admin/billing/page.tsx
+50 -37
View File
@@ -15,6 +15,7 @@ import type {
LifecycleSettings,
} from '@/types';
import { DollarSign, Edit2, Shield, Clock, Layers, Info, Box, Server, Globe } from 'lucide-react';
import { Select } from '@/components/ui/select';
const cycles: BillingCycle[] = ['hourly', 'monthly', 'yearly'];
@@ -198,16 +199,19 @@ function DeployDefaultsFields({
{readOnly ? (
<p className="text-sm font-mono mt-1">{profile.cpuRequest || '—'}</p>
) : (
<select
className="input-field w-full text-sm mt-0.5"
<Select
size="md"
className="mt-0.5"
ariaLabel={b.cpuRequest}
value={profile.cpuRequest || '50m'}
onChange={(e) => onUpdate({ cpuRequest: e.target.value })}
>
<option value="50m">50m</option>
<option value="100m">100m</option>
<option value="250m">250m</option>
<option value="500m">500m</option>
</select>
onChange={(v) => onUpdate({ cpuRequest: v })}
options={[
{ value: '50m', label: '50m' },
{ value: '100m', label: '100m' },
{ value: '250m', label: '250m' },
{ value: '500m', label: '500m' },
]}
/>
)}
</div>
<div>
@@ -215,17 +219,20 @@ function DeployDefaultsFields({
{readOnly ? (
<p className="text-sm font-mono mt-1">{profile.cpuLimit}</p>
) : (
<select
className="input-field w-full text-sm mt-0.5"
<Select
size="md"
className="mt-0.5"
ariaLabel={b.cpuLimit}
value={profile.cpuLimit}
onChange={(e) => onUpdate({ cpuLimit: e.target.value })}
>
<option value="200m">200m</option>
<option value="250m">250m</option>
<option value="500m">500m</option>
<option value="1">{b.oneCore}</option>
<option value="2">{b.twoCores}</option>
</select>
onChange={(v) => onUpdate({ cpuLimit: v })}
options={[
{ value: '200m', label: '200m' },
{ value: '250m', label: '250m' },
{ value: '500m', label: '500m' },
{ value: '1', label: b.oneCore },
{ value: '2', label: b.twoCores },
]}
/>
)}
</div>
<div>
@@ -233,16 +240,19 @@ function DeployDefaultsFields({
{readOnly ? (
<p className="text-sm font-mono mt-1">{profile.memoryRequest || '—'}</p>
) : (
<select
className="input-field w-full text-sm mt-0.5"
<Select
size="md"
className="mt-0.5"
ariaLabel={b.memoryRequest}
value={profile.memoryRequest || '64Mi'}
onChange={(e) => onUpdate({ memoryRequest: e.target.value })}
>
<option value="64Mi">64 Mi</option>
<option value="128Mi">128 Mi</option>
<option value="256Mi">256 Mi</option>
<option value="512Mi">512 Mi</option>
</select>
onChange={(v) => onUpdate({ memoryRequest: v })}
options={[
{ value: '64Mi', label: '64 Mi' },
{ value: '128Mi', label: '128 Mi' },
{ value: '256Mi', label: '256 Mi' },
{ value: '512Mi', label: '512 Mi' },
]}
/>
)}
</div>
<div>
@@ -250,16 +260,19 @@ function DeployDefaultsFields({
{readOnly ? (
<p className="text-sm font-mono mt-1">{profile.memoryLimit}</p>
) : (
<select
className="input-field w-full text-sm mt-0.5"
<Select
size="md"
className="mt-0.5"
ariaLabel={b.memoryLimit}
value={profile.memoryLimit}
onChange={(e) => onUpdate({ memoryLimit: e.target.value })}
>
<option value="256Mi">256 Mi</option>
<option value="512Mi">512 Mi</option>
<option value="1Gi">1 Gi</option>
<option value="2Gi">2 Gi</option>
</select>
onChange={(v) => onUpdate({ memoryLimit: v })}
options={[
{ value: '256Mi', label: '256 Mi' },
{ value: '512Mi', label: '512 Mi' },
{ value: '1Gi', label: '1 Gi' },
{ value: '2Gi', label: '2 Gi' },
]}
/>
)}
</div>
<div className="sm:col-span-2">