public function up()
{
    DB::statement("CREATE OR REPLACE VIEW inventory_views AS
        SELECT
            inventories.*,
            COALESCE(bgry, 0) AS total_barangay,
            COALESCE(mmbr, 0) AS total_member,
            (inventories.quantity - (COALESCE(bgry, 0) + COALESCE(mmbr, 0))) as `remaining`
        FROM inventories
        LEFT JOIN (
            SELECT
                SUM(quantity) AS bgry, inventory_tagging_barangays.*
            FROM inventory_tagging_barangays
            WHERE deleted_by is NULL
            GROUP BY inventory_id
        ) bgrys ON bgrys.inventory_id = inventories.id AND bgrys.created_by = inventories.created_by
        LEFT JOIN (
            SELECT
                SUM(quantity) AS mmbr, inventory_tagging_members.*
            FROM inventory_tagging_members
            WHERE deleted_by is NULL AND barangay_id = '0'
            GROUP BY inventory_id
        ) mmbrs ON mmbrs.inventory_id = inventories.id AND mmbrs.created_by = inventories.created_by");
}

public function down()
{
    DB::statement("DROP VIEW inventory_views");
}

    <Form.Item
        name="additional_legal_credentials"
        rules={[validator.require]}
        className="input-text-area-label"
    >
        <FloatTextArea
            label="Additional Legal Credentials"
            placeholder="Additional Legal Credentials"
        />
    </Form.Item>

import { Card, Col, Row, Collapse } from "antd";
import ComponentHeader from "../Components/ComponentHeader";
import { faUser } from "@fortawesome/pro-solid-svg-icons";

export default function PageFaqs({ match, permission }) {
  const { Panel } = Collapse;
  return (
    <>
      <ComponentHeader title={permission} sub_title="SEARCH" icon={faUser} />

      <Card>
        <Row gutter={12}>
          <Col span={24}>
            <Collapse
              className="ant-collapse-primary"
              expandIcon={({ isActive }) =>
                isActive ? (
                  <span
                    className="ant-menu-submenu-arrow"
                    style={{ color: "#FFF", transform: "rotate(270deg)" }}
                  ></span>
                ) : (
                  <span
                    className="ant-menu-submenu-arrow"
                    style={{ color: "#FFF", transform: "rotate(90deg)" }}
                  ></span>
                )
              }
              expandIconPosition="right"
              defaultActiveKey={["1"]}
            >
              <Panel
                header="Login Information"
                key="1"
                className="accordion bg-darkgray-form"
                extra={
                    <FontAwesomeIcon
                        onClick={() => remove(name)}
                        icon={faTrash}
                    />
                }
              >
                asdjkhds
              </Panel>
            </Collapse>
          </Col>
        </Row>
      </Card>
    </>
  );
}

<Collapse
    className="main-1-collapse"
    expandIcon={({ isActive }) =>
        isActive ? (
        <span
            className="ant-menu-submenu-arrow"
            style={{ color: "#FFF", transform: "rotate(270deg)" }}
        ></span>
        ) : (
        <span
            className="ant-menu-submenu-arrow"
            style={{ color: "#FFF", transform: "rotate(90deg)" }}
        ></span>
        )
    }
    defaultActiveKey={["1"]}
    expandIconPosition="start"
>
    <Panel
        header="LOGIN INFORMATION"
        key="1"
        className="accordion bg-darkgray-form"
        extra={
            <FontAwesomeIcon
                icon={faTrash}
                onClick={(event) => {
                    alert("asd");
                }}
            />
        }
    >
        <span>
        Yes, we offer testing packages for all ages and sports.
        </span>
    </Panel>
</Collapse>