Feat/walt/purchase report sort frontend

api/externals/repository/buy_report_repository.go

@@ -322,9 +322,17 @@ func applyBuyReportFilters(ds *goqu.SelectDataset, year, financialRecordID, paid
 		conditions["financial_records.id"] = financialRecordID
 	}
 
-	// paid_by_user_idを優先
 	if paidByUserID != "" {
-		conditions["buy_reports.paid_by_user_id"] = paidByUserID
+		ds = ds.Where(
+			goqu.Or(
+				goqu.I("buy_reports.paid_by_user_id").Eq(paidByUserID),
+				goqu.I("buy_reports.paid_by").Eq(
+					dialect.From("users").
+						Select(goqu.I("users.name")).
+						Where(goqu.I("users.id").Eq(paidByUserID)),
+				),
+			),
+		)
 	} else if paidBy != "" {
 		// フォールバック: 文字列で絞り込み
 		conditions["buy_reports.paid_by"] = paidBy

view/next-project/src/components/purchasereports/PurchaseReportPaidByFilterModal.tsx

@@ -0,0 +1,177 @@
+import React, { FC, useMemo, useState } from 'react';
+import Select, { SingleValue } from 'react-select';
+
+import { normalizePaidBy } from '@/utils/purchaseReportFilters';
+import {
+  CloseButton,
+  Modal,
+  OutlinePrimaryButton,
+  Select as CommonSelect,
+} from '@components/common';
+import { Bureau, User } from '@type/common';
+
+type NameOption = { value: string; label: string };
+
+interface PurchaseReportPaidByFilterModalProps {
+  onClose: () => void;
+  onApply: (selection: {
+    bureauId: number | null;
+    paidByUserId: number | null;
+    paidBy: string | null;
+  }) => void;
+  bureaus: Bureau[];
+  users: User[];
+  legacyPaidByOptions: string[];
+  selectedBureauId: number | null;
+  selectedPaidByUserId: number | null;
+  selectedPaidBy: string | null;
+}
+
+const PurchaseReportPaidByFilterModal: FC<PurchaseReportPaidByFilterModalProps> = (props) => {
+  const {
+    onClose,
+    onApply,
+    bureaus,
+    users,
+    legacyPaidByOptions,
+    selectedBureauId,
+    selectedPaidByUserId,
+    selectedPaidBy,
+  } = props;
+
+  const [draftBureauId, setDraftBureauId] = useState<number | null>(selectedBureauId);
+  const [draftPaidByUserId, setDraftPaidByUserId] = useState<number | null>(
+    selectedPaidByUserId ?? null,
+  );
+  const [draftPaidBy, setDraftPaidBy] = useState<string | null>(normalizePaidBy(selectedPaidBy));
+
+  const labelClassName = 'mb-2 text-sm text-black-600';
+  const selectTextClassName = 'text-black-600';
+  const optionClassName = 'text-black-600';
+
+  const bureauNameMap = useMemo(
+    () =>
+      new Map(
+        bureaus.map((bureau) => [bureau.id ?? 0, bureau.name] as const).filter(([id]) => id > 0),
+      ),
+    [bureaus],
+  );
+
+  const filteredUsers = useMemo(() => {
+    if (!draftBureauId) return users;
+    return users.filter((user) => user.bureauID === draftBureauId);
+  }, [draftBureauId, users]);
+
+  const nameOptions = useMemo(
+    (): NameOption[] => [
+      { value: '', label: '絞り込みなし' },
+      ...legacyPaidByOptions.map((name) => ({ value: `legacy:${name}`, label: name })),
+      ...filteredUsers.map((u) => {
+        const bureauName = bureauNameMap.get(u.bureauID);
+        const label = draftBureauId || !bureauName ? u.name : `${bureauName} ${u.name}`;
+        return { value: `user:${u.id}`, label };
+      }),
+    ],
+    [filteredUsers, legacyPaidByOptions, bureauNameMap, draftBureauId],
+  );
+
+  const nameSelectValue =
+    draftPaidByUserId != null
+      ? (nameOptions.find((o) => o.value === `user:${draftPaidByUserId}`) ?? nameOptions[0])
+      : draftPaidBy != null
+        ? (nameOptions.find((o) => o.value === `legacy:${draftPaidBy}`) ?? nameOptions[0])
+        : nameOptions[0];
+
+  const handleBureauChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value;
+    const nextBureauId = value === '' ? null : Number(value);
+    setDraftBureauId(nextBureauId);
+    setDraftPaidByUserId(null);
+    setDraftPaidBy(null);
+  };
+
+  const handleNameChange = (option: SingleValue<NameOption>) => {
+    const val = option?.value ?? '';
+    if (val === '') {
+      setDraftPaidByUserId(null);
+      setDraftPaidBy(null);
+    } else if (val.startsWith('user:')) {
+      const id = Number(val.slice(5));
+      setDraftPaidByUserId(id);
+      setDraftPaidBy(users.find((u) => u.id === id)?.name ?? null);
+    } else {
+      setDraftPaidByUserId(null);
+      setDraftPaidBy(val.slice(7));
+    }
+  };
+
+  const handleApply = () => {
+    onApply({
+      bureauId: draftBureauId ?? null,
+      paidByUserId: draftPaidByUserId ?? null,
+      paidBy: normalizePaidBy(draftPaidBy),
+    });
+  };
+
+  return (
+    <Modal className='w-[90vw] max-w-[440px] p-6 shadow-lg' onClick={onClose}>
+      <div className='flex justify-end'>
+        <CloseButton onClick={onClose} />
+      </div>
+      <div className='mt-2 space-y-5'>
+        <div>
+          <p className={labelClassName}>局名</p>
+          <CommonSelect
+            className={selectTextClassName}
+            value={draftBureauId ?? ''}
+            onChange={handleBureauChange}
+          >
+            <option className={optionClassName} value=''>
+              絞り込みなし
+            </option>
+            {bureaus.map((bureau) => (
+              <option className={optionClassName} key={bureau.id ?? 0} value={bureau.id ?? 0}>
+                {bureau.name}
+              </option>
+            ))}
+          </CommonSelect>
+        </div>
+        <div>
+          <p className={labelClassName}>氏名</p>
+          <Select<NameOption>
+            instanceId='paid-by-name-select'
+            isSearchable
+            options={nameOptions}
+            value={nameSelectValue}
+            onChange={handleNameChange}
+            noOptionsMessage={() => '該当なし'}
+            menuPortalTarget={typeof window !== 'undefined' ? document.body : undefined}
+            styles={{
+              control: (base, state) => ({
+                ...base,
+                borderRadius: '9999px',
+                borderColor: state.isFocused ? '#48b2cf' : '#56DAFF',
+                outline: state.isFocused ? '1.5px #48b2cf solid' : 'none',
+                boxShadow: 'none',
+                paddingTop: '0.25rem',
+                paddingBottom: '0.25rem',
+                paddingLeft: '0.75rem',
+                paddingRight: '0.25rem',
+                '&:hover': {
+                  borderColor: state.isFocused ? '#48b2cf' : '#56DAFF',
+                },
+              }),
+              indicatorSeparator: () => ({ display: 'none' }),
+              menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+            }}
+          />
+        </div>
+      </div>
+      <div className='mt-6 flex justify-center'>
+        <OutlinePrimaryButton onClick={handleApply}>絞り込む</OutlinePrimaryButton>
+      </div>
+    </Modal>
+  );
+};
+
+export default PurchaseReportPaidByFilterModal;

view/next-project/src/components/purchasereports/PurchaseReportSummaryAmounts.tsx

@@ -0,0 +1,31 @@
+interface PurchaseReportSummaryAmountsProps {
+  unsettledAmountText: string;
+  unpackedAmountText: string;
+  className?: string;
+}
+
+export default function PurchaseReportSummaryAmounts({
+  unsettledAmountText,
+  unpackedAmountText,
+  className = '',
+}: PurchaseReportSummaryAmountsProps) {
+  return (
+    <div className={className}>
+      <div className='text-black-600 inline-grid grid-cols-[auto_auto_auto] gap-1 text-sm leading-normal font-medium'>
+        <span className='whitespace-nowrap'>未精算金額</span>
+        <span className='whitespace-nowrap'>：</span>
+        <span className='min-w-[12ch] text-right whitespace-nowrap'>
+          {unsettledAmountText}
+          {unsettledAmountText !== '-' && <span className='ml-1'>円</span>}
+        </span>
+
+        <span className='whitespace-nowrap'>未封詰め金額</span>
+        <span className='whitespace-nowrap'>：</span>
+        <span className='min-w-[12ch] text-right whitespace-nowrap'>
+          {unpackedAmountText}
+          {unpackedAmountText !== '-' && <span className='ml-1'>円</span>}
+        </span>
+      </div>
+    </div>
+  );
+}

view/next-project/src/components/purchasereports/index.ts

@@ -11,5 +11,6 @@ export { default as PurchaseOrderListModal } from './PurchaseOrderListModal';
 export { default as PurchaseReportAddModal } from './PurchaseReportAddModal';
 export { default as PurchaseReportConfirmModal } from './PurchaseReportConfirmModal';
 export { default as PurchaseReportItemNumModal } from './PurchaseReportItemNumModal'; // "PurchaseReport|temNumModal"を修正しました。
+export { default as PurchaseReportSummaryAmounts } from './PurchaseReportSummaryAmounts';
 export { default as ReceiptModal } from './ReceiptModal';
 export { default as CheckSettlementConfirmModal } from './CheckSettlementConfirmModal';