@hed-hog/operations 0.0.329 → 0.0.331

package/hedhog/frontend/app/_components/project-costs-section.tsx.ejs

@@ -93,6 +93,7 @@ import {
   updateProjectCost,
   type Currency,
 } from '../_lib/api';
+import { MASKED_VALUE } from '../_lib/hooks/use-values-visibility';
 import type {
   FullCostSummary,
   PaginatedResponse,
@@ -189,14 +190,23 @@ function costToForm(cost: ProjectCost): CostFormState {
 
 type Props = {
   projectId: number;
+  valuesVisible?: boolean;
 };
 
-export function ProjectCostsSection({ projectId }: Props) {
+export function ProjectCostsSection({
+  projectId,
+  valuesVisible = false,
+}: Props) {
   const t = useTranslations('operations.ProjectCostsSection');
   const commonT = useTranslations('operations.Common');
   const { request, showToastHandler, getSettingValue, currentLocaleCode } =
     useApp();
 
+  const fmtCurrency = (amount: number): string =>
+    valuesVisible
+      ? formatCurrency(amount, getSettingValue, currentLocaleCode)
+      : MASKED_VALUE;
+
   const queryClient = useQueryClient();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
   const [editingCost, setEditingCost] = useState<ProjectCost | null>(null);
@@ -415,11 +425,7 @@ export function ProjectCostsSection({ projectId }: Props) {
               <p className="text-xs text-muted-foreground">
                 {t('grandTotal')}:{' '}
                 <span className="font-medium text-foreground">
-                  {formatCurrency(
-                    grandTotal,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
+                  {fmtCurrency(grandTotal)}
                 </span>
               </p>
             ) : null}
@@ -457,11 +463,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.budget_amount,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.budget_amount)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -472,11 +474,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.extra_cost_total,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.extra_cost_total)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -487,11 +485,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.total_project_cost,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.total_project_cost)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -514,11 +508,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                   fullSummary.remaining_budget < 0 ? 'text-destructive' : ''
                 )}
               >
-                {formatCurrency(
-                  fullSummary.remaining_budget,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.remaining_budget)}
               </p>
             </div>
             <div className="rounded-xl border bg-card p-3">
@@ -552,11 +542,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                 </span>
               </div>
               <p className="text-sm font-semibold tabular-nums">
-                {formatCurrency(
-                  fullSummary.realized_total,
-                  getSettingValue,
-                  currentLocaleCode
-                )}
+                {fmtCurrency(fullSummary.realized_total)}
               </p>
             </div>
           </div>
@@ -616,11 +602,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                           {entry.category_name}
                         </span>
                         <span className="ml-auto shrink-0 text-xs font-medium tabular-nums">
-                          {formatCurrency(
-                            entry.total,
-                            getSettingValue,
-                            currentLocaleCode
-                          )}
+                          {fmtCurrency(entry.total)}
                         </span>
                       </div>
                     ))}
@@ -846,11 +828,7 @@ export function ProjectCostsSection({ projectId }: Props) {
                   </Badge>
                 </div>
                 <span className="text-xs font-medium text-muted-foreground">
-                  {formatCurrency(
-                    group.total_amount,
-                    getSettingValue,
-                    currentLocaleCode
-                  )}
+                  {fmtCurrency(group.total_amount)}
                 </span>
               </div>
 
@@ -920,20 +898,12 @@ export function ProjectCostsSection({ projectId }: Props) {
                         <TableCell className="text-right tabular-nums">
                           <span className="text-xs text-muted-foreground">
                             {Number(cost.quantity ?? 1)} ×{' '}
-                            {formatCurrency(
-                              Number(cost.amount),
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
+                            {fmtCurrency(Number(cost.amount))}
                           </span>
                         </TableCell>
                         <TableCell className="hidden text-right tabular-nums sm:table-cell">
                           <span className="font-medium">
-                            {formatCurrency(
-                              total,
-                              getSettingValue,
-                              currentLocaleCode
-                            )}
+                            {fmtCurrency(total)}
                           </span>
                         </TableCell>
                         <TableCell>
@@ -1026,25 +996,25 @@ export function ProjectCostsSection({ projectId }: Props) {
                     placeholder: t('fields.costTypeCodePlaceholder'),
                   },
                 ]}
-                mapSearchToCreateValues={(search) => ({ name: search })}
-                onCreate={async (values) => {
-                  const name = values.name?.trim() ?? '';
-                  const slug = name
-                    .toLowerCase()
-                    .replace(/\s+/g, '-')
-                    .replace(/[^a-z0-9-]/g, '');
-                  const code =
-                    values.code?.trim() ||
-                    name
-                      .toUpperCase()
-                      .replace(/\s+/g, '-')
-                      .replace(/[^A-Z0-9-]/g, '')
-                      .slice(0, 40);
-                  const created = await createProjectCostType(request, {
-                    name,
-                    code,
-                    slug,
-                  });
+                mapSearchToCreateValues={(search) => ({ name: search })}
+                onCreate={async (values) => {
+                  const name = values.name?.trim() ?? '';
+                  const slug = name
+                    .toLowerCase()
+                    .replace(/\s+/g, '-')
+                    .replace(/[^a-z0-9-]/g, '');
+                  const code =
+                    values.code?.trim() ||
+                    name
+                      .toUpperCase()
+                      .replace(/\s+/g, '-')
+                      .replace(/[^A-Z0-9-]/g, '')
+                      .slice(0, 40);
+                  const created = await createProjectCostType(request, {
+                    name,
+                    code,
+                    slug,
+                  });
                   return (created as ProjectCostType) ?? null;
                 }}
                 initialSelectedLabel={editingCost?.cost_type?.name}
@@ -1084,17 +1054,17 @@ export function ProjectCostsSection({ projectId }: Props) {
                     required: true,
                   },
                 ]}
-                mapSearchToCreateValues={(search) => ({ name: search })}
-                onCreate={async (values) => {
-                  const name = values.name?.trim() ?? '';
-                  const slug = name
-                    .toLowerCase()
-                    .replace(/\s+/g, '-')
-                    .replace(/[^a-z0-9-]/g, '');
-                  const created = await createProjectCostCategory(request, {
-                    name,
-                    slug,
-                  });
+                mapSearchToCreateValues={(search) => ({ name: search })}
+                onCreate={async (values) => {
+                  const name = values.name?.trim() ?? '';
+                  const slug = name
+                    .toLowerCase()
+                    .replace(/\s+/g, '-')
+                    .replace(/[^a-z0-9-]/g, '');
+                  const created = await createProjectCostCategory(request, {
+                    name,
+                    slug,
+                  });
                   return (created as ProjectCostCategory) ?? null;
                 }}
                 initialSelectedLabel={editingCost?.category?.name}