General Tab

---

General Tab – Company Information

The General.jsx component is responsible for collecting all the core details about a company. It is organized into three main sections:

• General Info
• Address
• Contact Information

This tab uses components from the so-kit-ui library to structure and render a form in a clean, responsive layout.

---

Code Example

Create or open the file: src/pages/company/components/tabs/General.jsx

General.jsx

import {
  DatePicker,
  Input,
  Section,
  SectionContainer,
  SectionTitle,
  Select,
} from 'so-kit-ui';

const legalForms = [
  {
    code: 'LLC',
    description: 'Limited Liability Company',
  },
  {
    code: 'CORP',
    description: 'Corporation',
  },
  {
    code: 'SOLO',
    description: 'Sole Proprietorship',
  },
  {
    code: 'PART',
    description: 'Partnership',
  },
  {
    code: 'LLP',
    description: 'Limited Liability Partnership',
  },
  {
    code: 'OT',
    description: 'Other',
  },
];

export const companyTypes = [
  {
    code: 'IT',
    description: 'Information Technology',
  },
  {
    code: 'ED',
    description: 'Education',
  },
  {
    code: 'RE',
    description: 'Research',
  },
  {
    code: 'FI',
    description: 'Financial',
  },
  {
    code: 'TR',
    description: 'Trade',
  },
  {
    code: 'OT',
    description: 'Other',
  },
];

const General = () => {
  return (
    <SectionContainer
      padded
      page
    >
      <Section columns={2}>
        <SectionTitle>title.general.info</SectionTitle>
        <Section.Elements>
          <Input id='companyName' />
          <Select
            id='legalForm'
            options={legalForms}
            vlCodeDescription
            valueOnly
          />
          <DatePicker id='establishedDate' />
          <Input
            id='capital'
            type='decimal'
            minValue={0}
            formatOptions={{
              maximumFractionDigits: 2,
            }}
          />
          <Input
            id='employees'
            type='number'
          />
          <Select
            id='type'
            options={companyTypes}
            vlCodeDescription
          />
        </Section.Elements>
      </Section>
      <Section>
        <SectionTitle>title.general.address</SectionTitle>
        <Section.Elements>
          <Input id='address.street' />
          <Input id='address.city' />
          <Input id='address.state' />
          <Input id='address.zip' />
        </Section.Elements>
      </Section>
      <Section>
        <SectionTitle>title.general.contact</SectionTitle>
        <Section.Elements>
          <Input id='website' />
          <Input id='phone' />
          <Input id='email' />
        </Section.Elements>
      </Section>
    </SectionContainer>
  );
};

export default General;

---

🧠 How It Works

• The form is divided using the SectionContainer and Section components from so-kit-ui, which help structure the content using a Tailwind CSS-based grid system.
• Each Section has a title (SectionTitle) and a group of input elements (Section.Elements).
• Standard form controls are used: Input, DatePicker, and Select.
  • Basic components like Input are used for both text and numeric fields. You can customize the behavior using the type attribute.
    • For more complex fields—like capital—set the type to "decimal" to allow decimal values. You can also define formatOptions, such as maximumFractionDigits: 2, to limit the input to two decimal places and ensure consistent formatting.
  • The Select other than the id of the key in the data response uses the options prop to populate its options. The vlCodeDescription prop is used to map the code and description fields from the legalForms or companyTypes arrays. This because for default the select uses value-label as identifier for the options.

---

🔄 Customization Example

• The capital field includes type="decimal" and formatOptions to format currency inputs with 2 decimal places.
• The Select component for type uses the companyTypes array to populate its options, mapping code as the value and description as the label.

This component is fully extensible—just add new fields or sections as needed!