santhoshj/headroom
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Team member form and status badge improvements

Browse Source 
1. Status badge: Render HTML in DataTable cell using {@html}
2. Form alignment: Consistent horizontal layout for all fields
   - Labels on left (w-28), inputs on right (flex-1)
   - Added dollar sign prefix for hourly rate
   - Wider modal (max-w-lg)
3. API docs: Regenerated with scribe:generate
This commit is contained in:
Santhosh Janardhanan
2026-02-18 23:03:55 -05:00
parent a8eecc7900
commit 32b524bff0
11 changed files with 2894 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/common/DataTable.svelte
View File

@@ -106,7 +106,7 @@
{#each row.getVisibleCells() as cell}
<td>
{#if typeof cell.column.columnDef.cell === 'function'}
{cell.column.columnDef.cell(cell.getContext())}
{@html cell.column.columnDef.cell(cell.getContext())}
{:else}
{cell.getValue()}
{/if}

62
frontend/src/routes/team-members/+page.svelte
View File

@@ -248,7 +248,7 @@
<!-- Create/Edit Modal -->
{#if showModal}
<div class="modal modal-open">
<div class="modal-box max-w-md">
<div class="modal-box max-w-lg">
<div class="flex justify-between items-center mb-4">
<h3 class="font-bold text-lg">{editingMember ? 'Edit Team Member' : 'Add Team Member'}</h3>
<button class="btn btn-ghost btn-sm btn-circle" onclick={closeModal}>
@@ -264,27 +264,29 @@
{/if}
<form onsubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
<div class="form-control mb-4">
<label class="label" for="name">
<span class="label-text">Name</span>
<!-- Name Field - Horizontal Layout -->
<div class="form-control mb-4 flex flex-row items-center gap-4">
<label class="label w-28 shrink-0" for="name">
<span class="label-text font-medium">Name</span>
</label>
<input
type="text"
id="name"
class="input input-bordered"
class="input input-bordered flex-1"
bind:value={formData.name}
placeholder="Enter name"
required
/>
</div>
<div class="form-control mb-4">
<label class="label" for="role">
<span class="label-text">Role</span>
<!-- Role Field - Horizontal Layout -->
<div class="form-control mb-4 flex flex-row items-center gap-4">
<label class="label w-28 shrink-0" for="role">
<span class="label-text font-medium">Role</span>
</label>
<select
id="role"
class="select select-bordered"
class="select select-bordered flex-1"
bind:value={formData.role_id}
required
>
@@ -294,30 +296,38 @@
</select>
</div>
<div class="form-control mb-4">
<label class="label" for="hourly_rate">
<span class="label-text">Hourly Rate ($)</span>
<!-- Hourly Rate Field - Horizontal Layout -->
<div class="form-control mb-4 flex flex-row items-center gap-4">
<label class="label w-28 shrink-0" for="hourly_rate">
<span class="label-text font-medium">Hourly Rate</span>
</label>
<input
type="number"
id="hourly_rate"
class="input input-bordered"
bind:value={formData.hourly_rate}
placeholder="0.00"
min="0.01"
step="0.01"
required
/>
<div class="flex-1 relative">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-base-content/50">$</span>
<input
type="number"
id="hourly_rate"
class="input input-bordered w-full pl-7"
bind:value={formData.hourly_rate}
placeholder="0.00"
min="0.01"
step="0.01"
required
/>
</div>
</div>
<div class="form-control mb-6">
<label class="label cursor-pointer justify-start gap-3">
<!-- Active Status -->
<div class="form-control mb-6 flex flex-row items-center gap-4">
<label class="label w-28 shrink-0">
<span class="label-text font-medium">Status</span>
</label>
<label class="label cursor-pointer justify-start gap-3 flex-1">
<input
type="checkbox"
class="checkbox"
class="checkbox checkbox-sm"
bind:checked={formData.active}
/>
<span class="label-text">Active</span>
<span class="label-text">{formData.active ? 'Active' : 'Inactive'}</span>
</label>
</div>