Align off-cycle payments with shared finance UI

frontend/src/components/finance/admin/PayrollAdminModals.tsx

@@ -34,7 +34,7 @@ import { formatPayrollPoints, normalizePayrollPoints } from "@/lib/payroll";
 const inputClass = "app-input w-full rounded-lg px-3 py-2.5 text-sm";
 const selectClass = "app-select w-full rounded-lg px-3 py-2.5 text-sm";
 
-function ModalActions({
+export function ModalActions({
   busy,
   disabled = false,
   onClose,
@@ -71,7 +71,7 @@ function ModalActions({
   );
 }
 
-function FormError({ message }: { message: string | null }) {
+export function FormError({ message }: { message: string | null }) {
   if (!message) return null;
   return (
     <div className="app-feedback-danger mt-4 rounded-lg px-3 py-2.5 text-sm">

frontend/src/components/finance/admin/PayrollAdminTables.tsx

@@ -40,17 +40,19 @@ function RecordStatus({ status }: { status: PayrollApprovalStatus }) {
   );
 }
 
-function CompactRecordCard({
+export function CompactRecordCard({
   title,
   subtitle,
   summary,
   status,
+  statusContent,
   children,
 }: {
   title: string;
   subtitle: string;
   summary: ReactNode;
   status: PayrollApprovalStatus;
+  statusContent?: ReactNode;
   children: ReactNode;
 }) {
   const [open, setOpen] = useState(false);
@@ -81,7 +83,7 @@ function CompactRecordCard({
           </span>
         </span>
         <span className="shrink-0">
-          <RecordStatus status={status} />
+          {statusContent ?? <RecordStatus status={status} />}
         </span>
       </button>
       {open ? (
@@ -93,7 +95,7 @@ function CompactRecordCard({
   );
 }
 
-function CompactField({
+export function CompactField({
   label,
   children,
 }: {
@@ -110,7 +112,7 @@ function CompactField({
   );
 }
 
-function ListState({
+export function ListState({
   loading,
   error,
   empty,
@@ -242,7 +244,7 @@ export function PayrollInputHistory({
   );
 }
 
-function ActionButton({
+export function ActionButton({
   label,
   icon,
   onClick,