Standardize adjustment reason categories and descriptions

src/features/stock-adjustments/components/stock-adjustments-client.tsx

@@ -26,6 +26,13 @@ const emptyForm = (): StockAdjustmentForm => ({
   notes: ""
 });
 
+const adjustmentReasonCategoryLabels: Record<AdjustmentReasonRecord["category"], string> = {
+  ADJUSTMENT: "Penyesuaian / Adjustment",
+  SHRINKAGE: "Penyusutan / Shrinkage",
+  DAMAGE: "Kerusakan / Damage",
+  REGRADE: "Regrade / Regrade"
+};
+
 export function StockAdjustmentsClient() {
   const { dict, locale } = useLocale();
   const [items, setItems] = useState<StockAdjustmentListItem[]>([]);
@@ -167,14 +174,24 @@ export function StockAdjustmentsClient() {
             }
             options={reasons.map((reason) => ({
               value: reason.id,
-              label: `${reason.code} - ${reason.name} (${reason.category})`
+              label: `${reason.code} - ${reason.name} (${adjustmentReasonCategoryLabels[reason.category]})`
             }))}
             placeholder={dict.stockAdjustments.chooseReason}
           />
 
           {selectedReason ? (
             <div className="rounded border border-line/70 bg-slate-50 px-4 py-4 text-sm text-slate-600">
-              {dict.stockAdjustments.category}: <span className="font-medium text-ink">{selectedReason.category}</span>
+              <div>
+                {dict.stockAdjustments.category}:{" "}
+                <span className="font-medium text-ink">
+                  {adjustmentReasonCategoryLabels[selectedReason.category]}
+                </span>
+              </div>
+              {selectedReason.description ? (
+                <div className="mt-2 text-xs leading-5 text-slate-500">
+                  {selectedReason.description}
+                </div>
+              ) : null}
             </div>
           ) : null}
 
@@ -261,7 +278,14 @@ export function StockAdjustmentsClient() {
                     </td>
                     <td className="text-slate-600">
                       {item.reason.name}
-                      <div className="mt-1 text-xs text-slate-500">{item.reason.category}</div>
+                      <div className="mt-1 text-xs text-slate-500">
+                        {adjustmentReasonCategoryLabels[item.reason.category]}
+                      </div>
+                      {item.reason.description ? (
+                        <div className="mt-1 text-xs leading-5 text-slate-500">
+                          {item.reason.description}
+                        </div>
+                      ) : null}
                     </td>
                     <td className={item.qty_change < 0 ? "text-ember" : "text-moss"}>
                       {item.qty_change > 0 ? "+" : ""}