Skip to content

feat(frontend): add employee performance bonus modal #615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tokenjunkielabs wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(frontend): add employee performance bonus modal #615

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 236 additions & 3 deletions frontend/src/pages/EmployeeEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ interface EmployeeFormState {

interface EmployeeItem {
id: string;
organizationId: number;
name: string;
email: string;
imageUrl?: string;
Expand All @@ -39,6 +40,7 @@ const initialFormState: EmployeeFormState = {

interface BackendEmployee {
id: number;
organization_id: number;
first_name: string;
last_name: string;
email: string;
Expand All @@ -48,19 +50,35 @@ interface BackendEmployee {
status: string;
}

interface PayrollRunRecord {
id: number;
batch_id: string;
status: 'draft' | 'pending' | 'processing' | 'completed' | 'failed';
period_start: string;
period_end: string;
asset_code: string;
created_at: string;
}

export default function EmployeeEntry() {
const [isAdding, setIsAdding] = useState(false);
const [formData, setFormData] = useState<EmployeeFormState>(initialFormState);
const [employees, setEmployees] = useState<EmployeeItem[]>([]);
const [loading, setLoading] = useState(false);
const [bonusEmployee, setBonusEmployee] = useState<EmployeeItem | null>(null);
const [bonusRun, setBonusRun] = useState<PayrollRunRecord | null>(null);
const [bonusAmount, setBonusAmount] = useState('');
const [bonusDescription, setBonusDescription] = useState('');
const [bonusLoading, setBonusLoading] = useState(false);
const [bonusError, setBonusError] = useState<string | null>(null);
const [notification, setNotification] = useState<{
message: string;
secretKey?: string;
walletAddress?: string;
employeeName?: string;
} | null>(null);

const { notifySuccess } = useNotification();
const { notifySuccess, notifyError } = useNotification();
const { saving, lastSaved, loadSavedData } = useAutosave<EmployeeFormState>(
'employee-entry-draft',
formData
Expand All @@ -74,6 +92,7 @@ export default function EmployeeEntry() {
const employeeRows = Array.isArray(response.data?.data) ? response.data.data : [];
const mapped: EmployeeItem[] = employeeRows.map((emp: BackendEmployee) => ({
id: String(emp.id),
organizationId: emp.organization_id,
name: `${emp.first_name} ${emp.last_name}`,
email: emp.email,
position: emp.position ?? emp.job_title ?? 'Employee',
Expand Down Expand Up @@ -158,6 +177,101 @@ export default function EmployeeEntry() {
}
};

const closeBonusModal = () => {
setBonusEmployee(null);
setBonusRun(null);
setBonusAmount('');
setBonusDescription('');
setBonusError(null);
};

const handleEmployeeClick = async (employee: EmployeeItem) => {
setBonusEmployee(employee);
setBonusRun(null);
setBonusAmount('');
setBonusDescription('');
setBonusError(null);
setBonusLoading(true);

try {
const response = await api.get<{
success: boolean;
data: { data: PayrollRunRecord[]; total: number };
}>('/v1/payroll-bonus/runs', {
params: {
organizationId: employee.organizationId,
page: 1,
limit: 50,
},
});

const eligibleRuns = (response.data?.data?.data ?? [])
.filter((run) => run.status === 'draft' || run.status === 'pending')
.sort((a, b) => {
const aTime = new Date(a.period_start || a.created_at).getTime();
const bTime = new Date(b.period_start || b.created_at).getTime();
return aTime - bTime;
});

const nextRun = eligibleRuns[0] ?? null;
setBonusRun(nextRun);
if (!nextRun) {
setBonusError(
"No draft or pending payroll run is available for this employee's organization."
);
}
} catch (error) {
const message = error instanceof Error ? error.message : 'Failed to load payroll runs';
setBonusError(message);
notifyError('Could not load the next payroll run', message);
} finally {
setBonusLoading(false);
}
};

const handleBonusSubmit = async (e: React.SyntheticEvent) => {
e.preventDefault();
if (!bonusEmployee || !bonusRun) return;

const numericAmount = Number(bonusAmount);
if (!Number.isFinite(numericAmount) || numericAmount <= 0) {
setBonusError('Enter a bonus amount greater than zero.');
return;
}

setBonusLoading(true);
setBonusError(null);

try {
await api.post(
'/v1/payroll-bonus/items/bonus',
{
payrollRunId: bonusRun.id,
employeeId: Number(bonusEmployee.id),
amount: bonusAmount.trim(),
description: bonusDescription.trim() || 'Performance bonus',
},
{
headers: {
'Idempotency-Key': `performance-bonus-${bonusEmployee.id}-${bonusRun.id}-${Date.now()}`,
},
}
);

notifySuccess(
`Performance bonus added for ${bonusEmployee.name}`,
`Included in next payroll batch ${bonusRun.batch_id}.`
);
closeBonusModal();
} catch (error) {
const message = error instanceof Error ? error.message : 'Failed to add performance bonus';
setBonusError(message);
notifyError('Performance bonus was not saved', message);
} finally {
setBonusLoading(false);
}
};

if (isAdding) {
return (
<div
Expand Down Expand Up @@ -346,10 +460,129 @@ export default function EmployeeEntry() {
) : (
<EmployeeList
employees={employees}
onEmployeeClick={(employee: EmployeeItem) => console.log('Clicked:', employee.name)}
onAddEmployee={(employee: EmployeeItem) => console.log('Added:', employee)}
onEmployeeClick={(employee: EmployeeItem) => {
void handleEmployeeClick(employee);
}}
onAddEmployee={(employee: EmployeeItem) => {
void handleEmployeeClick(employee);
}}
/>
)}

{bonusEmployee && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
role="dialog"
aria-modal="true"
aria-labelledby="performance-bonus-title"
onMouseDown={(event) => {
if (event.target === event.currentTarget && !bonusLoading) closeBonusModal();
}}
>
<div className="w-full max-w-lg rounded-2xl border border-hi bg-bg p-6 shadow-2xl">
<div className="mb-5 flex items-start justify-between gap-4">
<div>
<p className="mb-1 text-xs font-bold uppercase tracking-widest text-accent">
One-time payroll adjustment
</p>
<h2 id="performance-bonus-title" className="text-xl font-black">
Add performance bonus
</h2>
<p className="mt-1 text-sm text-muted">{bonusEmployee.name}</p>
</div>
<button
type="button"
onClick={closeBonusModal}
disabled={bonusLoading}
className="rounded-lg px-3 py-2 text-muted transition-colors hover:bg-white/5 hover:text-text disabled:opacity-50"
aria-label="Close performance bonus modal"
>
Close
</button>
</div>

{bonusLoading && !bonusRun ? (
<p className="mb-4 text-sm text-muted">Loading the next payroll run...</p>
) : null}

{bonusRun ? (
<div className="mb-5 rounded-xl border border-accent/30 bg-accent/5 p-4">
<p className="text-[10px] font-bold uppercase tracking-widest text-muted">
Next scheduled payment run
</p>
<p className="mt-1 font-mono text-sm font-bold text-text">{bonusRun.batch_id}</p>
<div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted">
<span>Status: <b className="text-text">{bonusRun.status}</b></span>
<span>
Period starts:{' '}
<b className="text-text">
{new Date(bonusRun.period_start).toLocaleDateString()}
</b>
</span>
<span>Asset: <b className="text-text">{bonusRun.asset_code}</b></span>
</div>
</div>
) : null}

<form
onSubmit={(event) => {
void handleBonusSubmit(event);
}}
className="space-y-4"
>
<Input
id="performanceBonusAmount"
fieldSize="md"
label="Bonus amount"
name="performanceBonusAmount"
type="number"
min="0.0000001"
step="0.0000001"
value={bonusAmount}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setBonusAmount(event.target.value)
}
placeholder="0.00"
disabled={!bonusRun || bonusLoading}
required
/>

<div>
<label
htmlFor="performanceBonusDescription"
className="mb-2 block text-sm font-semibold text-text"
>
Reason / description
</label>
<textarea
id="performanceBonusDescription"
value={bonusDescription}
onChange={(event) => setBonusDescription(event.target.value)}
placeholder="e.g. Q3 launch performance award"
rows={3}
disabled={!bonusRun || bonusLoading}
className="w-full resize-none rounded-lg border border-hi bg-black/10 px-3 py-2 text-sm text-text outline-none transition-colors focus:border-accent disabled:opacity-50"
/>
</div>

{bonusError ? (
<div className="rounded-lg border border-danger/30 bg-danger/10 p-3 text-sm text-danger">
{bonusError}
</div>
) : null}

<div className="flex justify-end gap-3 pt-2">
<Button type="button" variant="secondary" size="md" onClick={closeBonusModal} disabled={bonusLoading}>
Cancel
</Button>
<Button type="submit" variant="primary" size="md" disabled={!bonusRun || bonusLoading}>
{bonusLoading ? 'Saving...' : 'Add to next payroll'}
</Button>
</div>
</form>
</div>
</div>
)}
</div>
);
}