import React from "react";
import "../Company/company.css";
import { useState, useEffect } from "react";
import axios from "axios";
import baseUrl from "../../../array/base/config";
import LoadingAnimation from "../Loading/LoadingAnimation";
/**
* Represents a CompanyDetailsPage page for showing company details
* @module CompanyDetailsPage
* @returns {JSX.Element} Returns a JSX code for showing company details
*/
const CompanyDetailsPage = () => {
/**
* React state that holds company details
* @constant {object} companyList
* @type {Array.<object>}
* @default []
* @memberof module:CompanyDetailsPage
*/
const [companyList, setCompanyList] = useState([]);
/**
* React state that holds loading status
* @constant {boolean} isLoading
* @type {boolean}
* @default true
* @memberof module:CompanyDetailsPage
*/
const [isLoading, setIsLoading] = useState(true);
/**
* React state that holds active tab
* @constant {number} activeTab
* @type {number}
* @default 0
* @memberof module:CompanyDetailsPage
*/
const [activeTab, setActiveTab] = useState(0);
/**
* React state that holds current index
* @constant {number} currentIndex
* @type {number}
* @default 0
* @memberof module:CompanyDetailsPage
*/
const [currentIndex, setCurrentIndex] = useState(0);
/**
* React state that holds filter dropdown status
* @constant {boolean} filterDropdown
* @type {boolean}
* @default false
* @memberof module:CompanyDetailsPage
*/
const [filterDropdown, setFilterDropdown] = useState(false);
useEffect(() => {
apicall();
}, []);
/**
* Function that calls api to get company details
* @memberof module:CompanyDetailsPage
* @funtion apicall
*/
const apicall = () => {
const detail = localStorage.getItem("token");
axios({
method: "get",
url: `${baseUrl}/api/company/`,
headers: {
Authorization: `Token ${detail}`,
},
})
.then((res) => {
setCompanyList(res?.data?.data?.results);
setIsLoading(false);
})
.catch((err) => console.log(err));
};
const handleTabChange = (index) => {
setActiveTab(index);
setCurrentIndex(index);
setFilterDropdown(false);
};
if (isLoading) {
return <LoadingAnimation />;
}
return (
<div className="company_container">
<div className="company_container_heading">
<div className="company_container_head">
<h2 className="main-title">Company</h2>
</div>
<div className="company_container_search">
<div className="left_content_wrapper flex">
<div className="left_company_container_search">
<div className="company_container_search_input">
{/* <ion-icon name="search-outline"></ion-icon> */}
<input type="text" placeholder="Search" />
</div>
</div>
<div className="left_company_container_search">
<ion-icon name="search"></ion-icon>
</div>
</div>
<div className="right_company_container_search">
<div
className="company_container_filter_div"
onClick={() => {
setFilterDropdown(!filterDropdown);
}}
>
<p>Select by Company</p>
{filterDropdown ? (
<ion-icon name="chevron-up-outline"></ion-icon>
) : (
<ion-icon name="chevron-down-outline"></ion-icon>
)}
{filterDropdown && (
<div className="company_container_filter_dropdown">
{companyList.map((dat, index) => (
<p
key={index}
onClick={() => handleTabChange(index)}
style={{
background: currentIndex === index ? "#6eccaf26" : null,
borderLeft:
currentIndex === index ? "3px solid #53BF8A" : null,
}}
>
{dat?.name}
</p>
))}
</div>
)}
</div>
</div>
</div>
</div>
<div className="company_heading_for_mobile">
<div className="company_mobile_card">
<div
className="company_filter"
onClick={() => {
setFilterDropdown(!filterDropdown);
}}
>
<p>Select Company</p>
{filterDropdown ? (
<ion-icon name="chevron-up-outline"></ion-icon>
) : (
<ion-icon name="chevron-down-outline"></ion-icon>
)}
</div>
</div>
{filterDropdown && (
<div className="company_menu_filter">
{companyList.map((dat, index) => (
<p
key={index}
onClick={() => handleTabChange(index)}
style={{
background: currentIndex === index ? "#53BF8A" : null,
color: currentIndex === index ? "#ffffff" : null,
}}
>
{dat?.name}
</p>
))}
</div>
)}
</div>
{/* --------------------------------------------------- */}
<div className="conpany_container_body">
{companyList.map((tabData, index) => (
<div
key={index}
style={{ display: index === activeTab ? "block" : "none" }}
>
<div className="company_details">
<div className="company_heading">
<div className="company_logo_bg">
<img src={tabData?.logo} alt="" />
</div>
<div className="company_text">
<h3 className="font-[600] ">{tabData?.name}</h3>
<p>
{tabData?.addresses[0]?.country?.name}
{tabData?.addresses[0]?.district?.name}
</p>
</div>
</div>
<div className="company_heading_2">
<div className="small_company_card">
<div className="small_company_heading">
<h2> Total Capital </h2>
<p>{tabData?.total_capital}</p>
</div>
<ion-icon name="trending-up-outline"></ion-icon>
</div>
<div className="small_company_card">
<div className="small_company_heading">
<h2>Total Shareholder</h2>
<p>{tabData?.total_shareholders}</p>
</div>
<ion-icon name="people"></ion-icon>
</div>
<div className="small_company_card">
<div className="small_company_heading">
<h2>Paid Capital </h2>
<p>{tabData?.paid_capital}</p>
</div>
<ion-icon name="trending-up-outline"></ion-icon>
</div>
</div>
</div>
<div className="company_summary_div">
<div className="company_summary_heading">
<h2 className="main-title">
{" "}
Company <span>Summary</span>{" "}
</h2>
</div>
<div className="company_summary_body">
<div className="company_summary_body_row1">
<h3>Overview</h3>
<p>{tabData?.description}</p>
</div>
<div className="company_summary_body_row2">
<div className="company_row1">
<h3>Type</h3>
<p>Public</p>
</div>
<div className="company_row1">
<h3>Status</h3>
<p>Active</p>
</div>
<div className="company_row1">
<h3>Established</h3>
<p>{tabData?.founded_at_bs} B.S</p>
</div>
<div className="company_row1">
<h3>Address</h3>
<p>
{tabData?.addresses[0]?.country?.name}
{tabData?.addresses[0]?.district?.name}
{tabData?.addresses[0]?.municipality?.name}
{tabData?.addresses[0]?.province?.name}
{tabData?.addresses[0]?.ward}
</p>
</div>
<div className="company_row1">
<h3>Facebook</h3>
<p>{tabData?.facebook}</p>
</div>
<div className="company_row1">
<h3>Email</h3>
<p>{tabData?.email}</p>
</div>
<div className="company_row1">
<h3>Contact no</h3>
<p>{tabData?.phone_number}</p>
</div>
<div className="company_row1">
<h3>Website</h3>
<p>{tabData?.website}</p>
</div>
<div className="company_row1">
<h3>Sectors</h3>
<h4>{tabData?.industry}</h4>
</div>
</div>
</div>
<div className="company_summary_footer">
<div className="company_social_media_link">
<ul>
<li>
<ion-icon
name="logo-facebook"
style={{ color: "#3b5998" }}
></ion-icon>
</li>
<li>
<ion-icon
name="logo-twitter"
style={{ color: "#00acee" }}
></ion-icon>
</li>
<li>
<ion-icon
name="logo-instagram"
style={{ color: "#fa7e1e" }}
></ion-icon>
</li>
<li>
<ion-icon
name="logo-youtube"
style={{ color: "#FF0000" }}
></ion-icon>
</li>
</ul>
</div>
</div>
</div>
<div className="company_founder">
<div className="company_founder_heading">
<h2 className="main-title">
Key Peoples / <span>Company Directors</span>
</h2>
</div>
<div className="founder_list">
{tabData.directors.map((dat, i) => {
return (
<div className="individual_card">
<img src={dat?.image} alt="" />
<div className="company_holder_name">
<h3>{dat?.name}</h3>
<p>{dat?.designation}</p>
</div>
</div>
);
})}
</div>
</div>
</div>
))}
</div>
</div>
);
};
export default CompanyDetailsPage;
Source