Uecko_ERP/modules/customers/src/web/pages/update/customer-basic-info-fields.tsx

import { TaxesMultiSelectField } from "@erp/core/components";
import { TextAreaField, TextField } from "@repo/rdx-ui/components";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  RadioGroup,
  RadioGroupItem,
} from "@repo/shadcn-ui/components";
import { Control } from "react-hook-form";
import { useTranslation } from "../../i18n";
import { CustomerUpdateData } from "../../schemas";

export const CustomerBasicInfoFields = ({ control }: { control: Control<CustomerUpdateData> }) => {
  const { t } = useTranslation();

  return (
    <Card className='border-0 shadow-none'>
      <CardHeader>
        <CardTitle>Identificación</CardTitle>
      </CardHeader>
      <CardContent>
        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-12 '>
          <div className='lg:col-span-full'>
            <FormField
              control={control}
              name='is_company'
              render={({ field }) => (
                <FormItem className='space-y-3'>
                  <FormLabel>{t("form_fields.customer_type.label")}</FormLabel>
                  <FormControl>
                    <RadioGroup
                      onValueChange={field.onChange}
                      defaultValue={field.value ? "true" : "false"}
                      className='flex items-center gap-6'
                    >
                      <FormItem className='flex items-center space-x-2'>
                        <FormControl>
                          <RadioGroupItem id='rgi-company' value='true' />
                        </FormControl>
                        <FormLabel className='font-normal' htmlFor='rgi-company'>
                          {t("form_fields.customer_type.company")}
                        </FormLabel>
                      </FormItem>
                      <FormItem className='flex items-center space-x-2'>
                        <FormControl>
                          <RadioGroupItem id='rgi-individual' value='false' />
                        </FormControl>
                        <FormLabel className='font-normal' htmlFor='rgi-individual'>
                          {t("form_fields.customer_type.individual")}
                        </FormLabel>
                      </FormItem>
                    </RadioGroup>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>
        </div>
        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-12 '>
          <div className='lg:col-span-2'>
            <TextField
              control={control}
              name='name'
              required
              label={t("form_fields.name.label")}
              placeholder={t("form_fields.name.placeholder")}
              description={t("form_fields.name.description")}
            />
          </div>

          <div className='lg:col-span-2'>
            <TextField
              control={control}
              name='trade_name'
              label={t("form_fields.trade_name.label")}
              placeholder={t("form_fields.trade_name.placeholder")}
              description={t("form_fields.trade_name.description")}
            />
          </div>

          <div className='lg:col-span-2'>
            <TaxesMultiSelectField
              control={control}
              name='default_taxes'
              required
              label={t("form_fields.default_taxes.label")}
              placeholder={t("form_fields.default_taxes.placeholder")}
              description={t("form_fields.default_taxes.description")}
            />
          </div>
          <div className='lg:col-span-2'>
            <TextField
              control={control}
              name='reference'
              label={t("form_fields.reference.label")}
              placeholder={t("form_fields.reference.placeholder")}
              description={t("form_fields.reference.description")}
            />
          </div>
          <TextAreaField
            className='lg:col-span-full'
            control={control}
            name='legal_record'
            label={t("form_fields.legal_record.label")}
            placeholder={t("form_fields.legal_record.placeholder")}
            description={t("form_fields.legal_record.description")}
          />
        </div>
      </CardContent>
    </Card>
  );

  return (
    <div className='space-y-12'>
      <div className='border-b border-gray-900/10 pb-12 dark:border-white/10'>
        <h2 className='text-base/7 font-semibold text-gray-900 dark:text-white'>
          {t("form_groups.basic_info.title")}
        </h2>
        <p className='mt-1 text-sm/6 text-gray-600 dark:text-gray-400'>
          {t("form_groups.basic_info.description")}
        </p>

        <div className='mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6'>
          <div className='sm:col-span-6'>
            <FormField
              control={control}
              name='is_company'
              render={({ field }) => (
                <FormItem className='space-y-3'>
                  <FormLabel>{t("form_fields.customer_type.label")}</FormLabel>
                  <FormControl>
                    <RadioGroup
                      onValueChange={field.onChange}
                      defaultValue={field.value ? "1" : "0"}
                      className='flex gap-6'
                    >
                      <FormItem className='flex items-center space-x-2'>
                        <FormControl>
                          <RadioGroupItem value='1' />
                        </FormControl>
                        <FormLabel className='font-normal'>
                          {t("form_fields.customer_type.company")}
                        </FormLabel>
                      </FormItem>
                      <FormItem className='flex items-center space-x-2'>
                        <FormControl>
                          <RadioGroupItem value='0' />
                        </FormControl>
                        <FormLabel className='font-normal'>
                          {t("form_fields.customer_type.individual")}
                        </FormLabel>
                      </FormItem>
                    </RadioGroup>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </div>

          <div className='sm:col-span-2'>
            <TextField
              control={control}
              name='name'
              required
              label={t("form_fields.name.label")}
              placeholder={t("form_fields.name.placeholder")}
              description={t("form_fields.name.description")}
            />
          </div>

          <div className='sm:col-span-2'>
            <TextField
              control={control}
              name='trade_name'
              label={t("form_fields.trade_name.label")}
              placeholder={t("form_fields.trade_name.placeholder")}
              description={t("form_fields.trade_name.description")}
            />
          </div>

          <div className='col-span-full'>
            <TextField
              control={control}
              name='reference'
              label={t("form_fields.reference.label")}
              placeholder={t("form_fields.reference.placeholder")}
              description={t("form_fields.reference.description")}
            />
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <Card className='shadow-sm bg-gray-50/50'>
      <CardHeader>
        <CardTitle>{t("form_groups.basic_info.title")}</CardTitle>
        <CardDescription>{t("form_groups.basic_info.description")}</CardDescription>
      </CardHeader>
      <CardContent className='grid grid-cols-1 gap-y-8 gap-x-6 @xl:grid-cols-2'>
        <FormField
          control={control}
          name='is_company'
          render={({ field }) => (
            <FormItem className='space-y-3'>
              <FormLabel>{t("form_fields.customer_type.label")}</FormLabel>
              <FormControl>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value ? "1" : "0"}
                  className='flex gap-6'
                >
                  <FormItem className='flex items-center space-x-2'>
                    <FormControl>
                      <RadioGroupItem value='1' />
                    </FormControl>
                    <FormLabel className='font-normal'>
                      {t("form_fields.customer_type.company")}
                    </FormLabel>
                  </FormItem>
                  <FormItem className='flex items-center space-x-2'>
                    <FormControl>
                      <RadioGroupItem value='0' />
                    </FormControl>
                    <FormLabel className='font-normal'>
                      {t("form_fields.customer_type.individual")}
                    </FormLabel>
                  </FormItem>
                </RadioGroup>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <TextField
          control={control}
          name='name'
          required
          label={t("form_fields.name.label")}
          placeholder={t("form_fields.name.placeholder")}
          description={t("form_fields.name.description")}
        />
        <TextField
          control={control}
          name='trade_name'
          label={t("form_fields.trade_name.label")}
          placeholder={t("form_fields.trade_name.placeholder")}
          description={t("form_fields.trade_name.description")}
        />
        <TextField
          control={control}
          name='reference'
          label={t("form_fields.reference.label")}
          placeholder={t("form_fields.reference.placeholder")}
          description={t("form_fields.reference.description")}
        />
      </CardContent>
    </Card>
  );
};