refactor: standardize currency formatting and reorder Tailwind classes in Payroll components

app/Models/Payroll.php

@@ -41,28 +41,28 @@ protected function casts(): array
     protected function baseSalaryFormatted(): Attribute
     {
         return Attribute::make(
-            get: fn () => $this->base_salary ? 'Rp '.number_format($this->base_salary, 0, ',', '.') : null,
+            get: fn () => 'Rp '.number_format($this->base_salary, 0, ',', '.'),
         );
     }
 
     protected function bonusFormatted(): Attribute
     {
         return Attribute::make(
-            get: fn () => $this->bonus ? 'Rp '.number_format($this->bonus, 0, ',', '.') : null,
+            get: fn () => 'Rp '.number_format($this->bonus, 0, ',', '.'),
         );
     }
 
     protected function deductionFormatted(): Attribute
     {
         return Attribute::make(
-            get: fn () => $this->deduction ? 'Rp '.number_format($this->deduction, 0, ',', '.') : null,
+            get: fn () => 'Rp '.number_format($this->deduction, 0, ',', '.'),
         );
     }
 
     protected function totalSalaryFormatted(): Attribute
     {
         return Attribute::make(
-            get: fn () => $this->total_salary ? 'Rp '.number_format($this->total_salary, 0, ',', '.') : null,
+            get: fn () => 'Rp '.number_format($this->total_salary, 0, ',', '.'),
         );
     }
 

app/Models/PayrollAdjustment.php

@@ -31,7 +31,7 @@ protected function casts(): array
     protected function amountFormatted(): Attribute
     {
         return Attribute::make(
-            get: fn () => $this->amount ? 'Rp '.number_format($this->amount, 0, ',', '.') : null,
+            get: fn () => 'Rp '.number_format($this->amount, 0, ',', '.'),
         );
     }
 

resources/js/components/cards/payroll-card.tsx

@@ -19,30 +19,30 @@ export function PayrollCard({ payroll, onClick, className }: PayrollCardProps) {
     return (
         <Card
             className={cn(
-                '@container/card relative cursor-pointer hover:scale-[1.02] transition-transform shadow-lg bg-card/50 backdrop-blur-sm',
+                '@container/card relative cursor-pointer bg-card/50 shadow-lg backdrop-blur-sm transition-transform hover:scale-[1.02]',
-                className
+                className,
             )}
             onClick={onClick}
         >
             <CardHeader className="gap-3">
                 <div className="flex w-full items-start justify-between gap-3">
-                    <CardDescription className="min-w-0 flex-1 break-words font-bold text-foreground leading-tight">
+                    <CardDescription className="min-w-0 flex-1 leading-tight font-bold break-words text-foreground">
                         {payroll.user?.name}
                     </CardDescription>
                     <Badge
                         variant={payroll.is_paid ? 'default' : 'outline'}
                         className={cn(
-                            'shrink-0 flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold sm:text-xs',
+                            'flex shrink-0 items-center gap-1 px-1.5 py-0.5 text-[10px] font-bold sm:text-xs',
                             payroll.is_paid
                                 ? 'bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300'
-                                : 'text-muted-foreground'
+                                : 'text-muted-foreground',
                         )}
                     >
                         {payroll.is_paid ? 'Lunas' : 'Pending'}
                     </Badge>
                 </div>
 
-                <CardTitle className="break-words text-xl sm:text-2xl font-bold tabular-nums tracking-tight">
+                <CardTitle className="text-xl font-bold tracking-tight break-words tabular-nums sm:text-2xl">
                     {payroll.total_salary_formatted}
                 </CardTitle>
             </CardHeader>
@@ -54,17 +54,29 @@ export function PayrollCard({ payroll, onClick, className }: PayrollCardProps) {
                         <span>{payroll.base_salary_formatted}</span>
                     </div>
                     {payroll.adjustments?.map((adj, idx) => (
-                        <div key={idx} className="flex justify-between text-muted-foreground italic">
+                        <div
+                            key={idx}
+                            className="flex justify-between text-muted-foreground italic"
+                        >
                             <span>{adj.description}</span>
-                            <span className={adj.type === 'bonus' ? 'text-green-600 font-medium' : 'text-red-500 font-medium'}>
+                            <span
-                                {adj.type === 'bonus' ? '+' : '-'}{adj.amount_formatted}
+                                className={
+                                    adj.type === 'bonus'
+                                        ? 'font-medium text-green-600'
+                                        : 'font-medium text-red-500'
+                                }
+                            >
+                                {adj.type === 'bonus' ? '+' : '-'}
+                                {adj.amount_formatted}
                             </span>
                         </div>
                     ))}
                 </div>
-                <div className="w-full pt-1.5 border-t mt-1.5 text-muted-foreground flex justify-between items-center">
+                <div className="mt-1.5 flex w-full items-center justify-between border-t pt-1.5 text-muted-foreground">
                     <span>Periode</span>
-                    <span className="font-semibold text-foreground">{payroll.period_month_formatted}</span>
+                    <span className="font-semibold text-foreground">
+                        {payroll.period_month_formatted}
+                    </span>
                 </div>
             </CardFooter>
         </Card>