hamedandClaude Opus 5
51c21938eb
components/appointment/ had every colour hard-coded, so the flow rendered identically in either theme even after the wiring was fixed. It now reads from CSS custom properties. These are not new colours. The :root values are byte-for-byte the hex codes that were already in the components — twenty-one files, mapped one to one — so light mode is unchanged. The dark values are derived from those same colours: surfaces and borders darkened, text inverted, and the two brand colours (the indigo and the orange) lightened rather than replaced, because both lose contrast against a dark surface at their original values. Verified in a headless browser with prefers-color-scheme forced dark: data-theme lands on <html> and --ap-surface resolves to #1b1b20 rather than white. Six one-off colours remain hard-coded — a success green, an error red and similar — each used exactly once and none of them a surface. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
import Content from "./Content";
|
|
import EditField from "../../../app/component/fields/EditField";
|
|
import DefaultSelect from "@/app/component/selectors/DefaultSelect";
|
|
|
|
function Form({ changeData, insurance, supplementaryInsurance, data, isForAnother, errors = {} }) {
|
|
const findBasicInsuranceVal = () => {
|
|
return insurance?.find(
|
|
(g) =>
|
|
g.id ===
|
|
(data?.basic_insurance?.value ? data?.basic_insurance.value.id : false)
|
|
);
|
|
};
|
|
|
|
const findSupplementaryInsuranceVal = () => {
|
|
return supplementaryInsurance?.find(
|
|
(g) =>
|
|
g.id ===
|
|
(data?.supplementary_insurance?.value ? data?.supplementary_insurance.value.id : false)
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="grid mt-[12px] sm:mt-[14px] md:mt-[17px] lg:mt-[20px] items-start justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
|
|
>
|
|
<Content title="شماره موبایل">
|
|
{isForAnother ? (
|
|
<EditField changeData={changeData} data={data?.phone} name="phone" error={errors?.phone} />
|
|
) : (
|
|
<div className="flex items-center justify-between px-[14px] py-[12.5px] border border-[var(--ap-border-2)] rounded-lg bg-[var(--ap-surface-3)]">
|
|
<span className="text-[var(--ap-text)]">{data?.phone?.value}</span>
|
|
<span className="text-[#4CAF50] text-[14px]">تایید شده</span>
|
|
</div>
|
|
)}
|
|
</Content>
|
|
<Content title="کد ملی">
|
|
<EditField
|
|
changeData={changeData}
|
|
data={data?.national_code}
|
|
name="national_code"
|
|
error={errors?.national_code}
|
|
/>
|
|
</Content>
|
|
<Content title="نام">
|
|
<EditField changeData={changeData} data={data?.name} name="name" error={errors?.name} />
|
|
</Content>
|
|
<Content title="نام خانوادگی">
|
|
<EditField changeData={changeData} data={data?.family} name="family" error={errors?.family} />
|
|
</Content>
|
|
<Content title="جنسیت">
|
|
<DefaultSelect
|
|
updateData={(name, val) => changeData(val, "value", name)}
|
|
label="جنسیت"
|
|
name="gender"
|
|
list={[
|
|
{ id: "male", title: "مرد" },
|
|
{ id: "female", title: "زن" },
|
|
]}
|
|
value={
|
|
data?.gender?.value
|
|
? { id: data.gender.value, title: data.gender.value === "male" ? "مرد" : "زن" }
|
|
: null
|
|
}
|
|
error={errors?.gender}
|
|
/>
|
|
</Content>
|
|
{isForAnother && (
|
|
<Content title="علت مراجعه (اختیاری)">
|
|
<EditField changeData={changeData} data={data?.patient_reason} name="patient_reason" error={errors?.patient_reason} />
|
|
</Content>
|
|
)}
|
|
<Content title="شماره بیمه (اختیاری)">
|
|
<EditField changeData={changeData} data={data?.insurance_id} name="insurance_id" error={errors?.insurance_id} />
|
|
</Content>
|
|
<Content title="نوع بیمه">
|
|
<DefaultSelect
|
|
updateData={(name, val) => changeData(val, "value", name)}
|
|
label="نوع بیمه"
|
|
name="basic_insurance"
|
|
list={insurance}
|
|
value={findBasicInsuranceVal()}
|
|
error={errors?.basic_insurance}
|
|
/>
|
|
</Content>
|
|
<Content title="بیمه تکمیلی (اختیاری)">
|
|
<DefaultSelect
|
|
updateData={(name, val) => changeData(val, "value", name)}
|
|
label="بیمه تکمیلی"
|
|
name="supplementary_insurance"
|
|
list={supplementaryInsurance}
|
|
value={findSupplementaryInsuranceVal()}
|
|
error={errors?.supplementary_insurance}
|
|
/>
|
|
</Content>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Form;
|