Refactor UI components and convert controls to select elements
- Extract InfoBox component for reusable alert boxes - Update AccountForm to use InfoBox component - Add InfoBox with explanatory text to tenant sections in LocationEditForm - Convert billFwdStrategy from radio buttons to select element - Convert updateScope from radio buttons to select element - Update localization strings for improved clarity - Fix updateScope defaultValue to use "current" instead of billFwdStrategy 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
@@ -8,6 +8,7 @@ import { useLocale, useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
|
||||
import { formatIban } from "../lib/formatStrings";
|
||||
import { InfoBox } from "./InfoBox";
|
||||
|
||||
export type AccountFormProps = {
|
||||
profile: UserProfile | null;
|
||||
@@ -42,12 +43,7 @@ const FormFields: FC<FormFieldsProps> = ({ profile, errors, message }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="alert max-w-md flex flex-row items-start">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="text-left">{t("info-box-message")}</span>
|
||||
</div>
|
||||
<InfoBox>{t("info-box-message")}</InfoBox>
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text">{t("first-name-label")}</span>
|
||||
|
||||
9
app/ui/InfoBox.tsx
Normal file
9
app/ui/InfoBox.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import { FC, ReactNode } from "react";
|
||||
|
||||
export const InfoBox: FC<{ children: ReactNode, className?: string }> = ({ children, className }) =>
|
||||
<div className={`alert max-w-md flex flex-row items-start gap-[0.5rem] ${className}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span className="text-left">{children}</span>
|
||||
</div>
|
||||
@@ -7,6 +7,7 @@ import { updateOrAddLocation } from "../lib/actions/locationActions";
|
||||
import { useFormState } from "react-dom";
|
||||
import Link from "next/link";
|
||||
import { useLocale, useTranslations } from "next-intl";
|
||||
import { InfoBox } from "./InfoBox";
|
||||
|
||||
export type LocationEditFormProps = {
|
||||
/** location which should be edited */
|
||||
@@ -82,7 +83,9 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
|
||||
<legend className="fieldset-legend font-semibold">{t("tenant-2d-code-legend")}</legend>
|
||||
|
||||
<div className="form-control mt-[-1em]">
|
||||
<InfoBox className="p-1 mb-1">{t("tenant-2d-code-info")}</InfoBox>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -149,6 +152,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
|
||||
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
|
||||
<legend className="fieldset-legend font-semibold">{t("auto-utility-bill-forwarding-legend")}</legend>
|
||||
<InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox>
|
||||
|
||||
<div className="form-control">
|
||||
<label className="label cursor-pointer justify-start gap-3">
|
||||
<input
|
||||
@@ -164,37 +169,15 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
|
||||
{autoBillFwd && (
|
||||
<>
|
||||
<div className="form-control">
|
||||
<div className="label">
|
||||
<span className="label-text font-medium">{t("utility-bill-forwarding-strategy-label")}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 ml-4">
|
||||
<label className="label cursor-pointer justify-start gap-3 py-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="billFwdStrategy"
|
||||
value="when-payed"
|
||||
className="radio radio-primary"
|
||||
defaultChecked={(location?.billFwdStrategy ?? "when-payed") === "when-payed"}
|
||||
/>
|
||||
<span className="label-text">{t("utility-bill-forwarding-when-payed")}</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-3 py-1">
|
||||
<input
|
||||
type="radio"
|
||||
name="billFwdStrategy"
|
||||
value="when-attached"
|
||||
className="radio radio-primary"
|
||||
defaultChecked={location?.billFwdStrategy === "when-attached"}
|
||||
/>
|
||||
<span className="label-text">{t("utility-bill-forwarding-when-attached")}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-control w-full">
|
||||
<label className="label">
|
||||
<span className="label-text">{t("tenant-email-label")}</span>
|
||||
</label>
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("utility-bill-forwarding-strategy-label")}</legend>
|
||||
<select defaultValue={location?.billFwdStrategy ?? "when-payed"} className="select input-bordered w-full" name="billFwdStrategy">
|
||||
<option value="when-payed">{t("utility-bill-forwarding-when-payed")}</option>
|
||||
<option value="when-attached">{t("utility-bill-forwarding-when-attached")}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("tenant-email-label")}</legend>
|
||||
<input
|
||||
id="tenantEmail"
|
||||
name="tenantEmail"
|
||||
@@ -212,7 +195,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</>
|
||||
)}
|
||||
</fieldset>
|
||||
@@ -226,25 +209,14 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<div className="form-control">
|
||||
<div className="label">
|
||||
<span className="label-text font-medium">{t("update-scope")}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 ml-4">
|
||||
<label className="label cursor-pointer justify-start gap-3 py-1">
|
||||
<input type="radio" name="updateScope" value="current" className="radio radio-primary" defaultChecked />
|
||||
<span className="label-text">{t("update-current-month")}</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-3 py-1">
|
||||
<input type="radio" name="updateScope" value="subsequent" className="radio radio-primary" />
|
||||
<span className="label-text">{t("update-subsequent-months")}</span>
|
||||
</label>
|
||||
<label className="label cursor-pointer justify-start gap-3 py-1">
|
||||
<input type="radio" name="updateScope" value="all" className="radio radio-primary" />
|
||||
<span className="label-text">{t("update-all-months")}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset className="fieldset mt-2 p-2">
|
||||
<legend className="fieldset-legend">{t("update-scope")}</legend>
|
||||
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">
|
||||
<option value="current">{t("update-current-month")}</option>
|
||||
<option value="subsequent">{t("update-subsequent-months")}</option>
|
||||
<option value="all">{t("update-all-months")}</option>
|
||||
</select>
|
||||
</fieldset>
|
||||
)}
|
||||
|
||||
<div id="status-error" aria-live="polite" aria-atomic="true">
|
||||
|
||||
Reference in New Issue
Block a user