import React, { useState, useEffect, useRef } from "react";
import { useParams } from "react-router";
import axios from "axios";
import { useReactToPrint } from "react-to-print";
import baseUrl from "../../../array/base/config";
import LoadingAnimation from "../Loading/LoadingAnimation";
/**
* Represents Karanama page component
* @module Karanama
* @return {JSX.Element}
*/
const Karanama = () => {
/**
* React useState for karanama
* @name karanama
* @memberof module:Karanama
* @type {object}
* @default {}
*
*/
const [karanama, setKaranama] = useState({});
/**
* React useState for loading
* @name loading
* @memberof module:Karanama
* @type {object}
* @default true
*/
const [loading, setLoading] = useState(true);
/**
* React useState for grouped address
* @name groupedAddresses
* @memberof module:Karanama
* @type {object}
* @default []
*
*/
const [groupedAddresses, setGroupedAddress] = useState([]);
/**
* React useState for trimmed date
* @name trimmedDate
* @memberof module:Karanama
* @type {object}
* @default null
*
*/
const [trimmedDate, setTrimmedDate] = useState();
/**
* React useParams for getting id
* @name useParams
* @memberof module:Karanama
* @type {object}
*
*/
const { id } = useParams();
/**
* React useRef for getting component ref
* @name componentRef
* @memberof module:Karanama
* @type {React.MutableRefObject<undefined>}
*/
const componentRef = useRef();
useEffect(() => {
apicall();
}, []);
/**
* React useReactToPrint for printing
* @name useReactToPrint
* @memberof module:Karanama
* @type {UseReactToPrintHookReturn}
*/
const handlePrint = useReactToPrint({
content: () => componentRef.current,
});
/**
* Function for trim date
* @name trimDate
* @memberof module:Karanama
* @function trimDate
* @param createdDate {string} - created date string
*/
const trimDate = (createdDate) => {
const date = new Date(createdDate);
const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1)
.toString()
.padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
setTrimmedDate(formattedDate);
};
/**
* Function for getting header
* @name getHeader
* @memberof module:Karanama
* @function getHeader
* @param companyName {string} - company name
* @return {JSX.Element}
*/
const getHeader = (companyName) => {
switch (companyName) {
case "Bandipur Cable Car & Tourism Limited":
return (
<p style={{ textAlign: "center" }}>
<span
style={{
fontSize: 25,
textAlign: "center",
fontWeight: "bold",
}}
>
बन्दीपुर केबलकार एण्ड टुरिजम लिमिटेड
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
( दर्ता नं. १०८६४४/०७९/०७०)
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
बन्दीपुर गाउँपालिका वडा नं.–०४
</span>
<br />
<br />
<span
style={{
fontSize: 21,
textAlign: "center",
fontWeight: "bold",
}}
>
<u>शेयर खरिदको लागि आवेदन फारम</u>
</span>
</p>
);
case "RKD Holdings Limited":
return (
<p style={{ textAlign: "center" }}>
<span
style={{
fontSize: 25,
textAlign: "center",
fontWeight: "bold",
}}
>
आरकेडी होल्डिंग्स लिमिटेड
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
( दर्ता नं. १५१७२७/०७२/०७३)
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
सभागृहचोक पोखरा नेपाल
</span>
<br />
<br />
<span
style={{
fontSize: 21,
textAlign: "center",
fontWeight: "bold",
}}
>
<u>शेयर खरिदको लागि आवेदन फारम</u>
</span>
</p>
);
case "Tourism Investment Fund Limited":
return (
<p style={{ textAlign: "center" }}>
<span
style={{
fontSize: 25,
textAlign: "center",
fontWeight: "bold",
}}
>
टुरिजम इन्भेस्टमेन्ट फण्ड लि.
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
( दर्ता नं. २२६६००/०७६/०७७ )
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
सभागृहचोक पोखरा नेपाल
</span>
<br />
<br />
<span
style={{
fontSize: 21,
textAlign: "center",
fontWeight: "bold",
}}
>
<u>शेयर खरिदको लागि आवेदन फारम</u>
</span>
</p>
);
case "Panchase Cable Car and Tours Limited":
return (
<p style={{ textAlign: "center" }}>
<span
style={{
fontSize: 25,
textAlign: "center",
fontWeight: "bold",
}}
>
पञ्चाचासे केबलकार एंड टुर्स ली.
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
( दर्ता नं. १९१८९९\०७४\०७५)
</span>
<br />
<span style={{ fontSize: 17, textAlign: "center" }}>
सभागृहचोक पोखरा नेपाल
</span>
<br />
<br />
<span
style={{
fontSize: 21,
textAlign: "center",
fontWeight: "bold",
}}
>
<u>शेयर खरिदको लागि आवेदन फारम</u>
</span>
</p>
);
default:
return <h1>No company match</h1>;
}
};
/**
* Function for handling address reducer
* @name handleAddressReducer
* @memberof module:Karanama
* @function handleAddressReducer
* @param addressArray {Array} - address array
*/
const handleAddressReducer = (addressArray) => {
const groupOfAddress = addressArray.reduce(
(acc, address) => {
if (address.address_type === "PERMANENT") {
acc.permanent.push(address);
} else if (address.address_type === "CURRENT") {
acc.temporary.push(address);
}
return acc;
},
{ permanent: [], temporary: [] }
);
setGroupedAddress(groupOfAddress);
};
/**
* Function for api call
* @name apicall
* @memberof module:Karanama
* @function apicall
* @return {Promise<void>}
*/
const apicall = async () => {
try {
const detail = localStorage.getItem("token");
const response = await axios({
method: "get",
url: `${baseUrl}/api/karanama/${id}/`,
headers: {
Authorization: `Token ${detail}`,
},
});
setKaranama(response.data.data);
console.log(response.data.data);
handleAddressReducer(response.data.data.shareholder_address);
trimDate(response.data.data.created);
setLoading(false);
} catch (error) {
console.log("the error is", error);
}
};
if (loading) {
return <LoadingAnimation />; // render loading spinner or message
}
return (
<div>
<>
<button onClick={handlePrint} className="print_btn">
{" "}
<ion-icon name="print"></ion-icon> Print
</button>
<div className="" style={{ padding: "0.5in" }} ref={componentRef}>
<>
<meta charSet="UTF-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<style
dangerouslySetInnerHTML={{
__html:
"\n table, th, td {\n\n border: 0.5px solid black;\n border-collapse: collapse;\n }\n\n @media print and (color) {\n * {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n }\n ",
}}
/>
{getHeader(karanama?.share?.name)}
<div style={{ margin: "20px 0", lineHeight: 15 }}>
<img
style={{
float: "right",
lineHeight: 15,
height: 140,
marginBottom: 10,
}}
src={`${baseUrl}${karanama?.shareholder_address[0]?.shareholder?.photo}`}
alt="shareholder photo"
/>
</div>
<span style={{ fontSize: 17, marginTop: "20px" }}>
मिति: {trimmedDate}
</span>
<br />
<br />
<span style={{ fontSize: 15, alignSelf: "start" }}>
यस कम्पनीले बिक्रीका लागि जगेडामा राखिएको शेयरहरु मध्ये निम्न
लिखित शेयरहरु खरिद गर्ने मनसाय भएको हुदा प्रतिशेयर रु १००/- को
दरले उक्त जगेडा शेयरहरु खरिद गर्नको लागि अनुरोध गर्दै देहाय
बमोजिमको विवरण सहित यो फारम पेश गरेको छु।
</span>
<br />
<br />
<table style={{ width: "100%" }}>
<tbody>
<tr style={{ border: "1px solid black" }}>
<th style={{ width: "10" }} />
<th style={{ fontSize: 15, fontWeight: 100, width: "20%" }}>
<u>अंक</u>
</th>
<th style={{ fontSize: 15, fontWeight: 100, width: "20%" }}>
<u>अक्षरुपी</u>
</th>
</tr>
<tr style={{ border: "1px solid black" }}>
<td style={{ height: 45, fontSize: 15 }}>
<u>शेयर संख्या</u>
</td>
<td style={{ fontSize: 15, fontWeight: 100 }}>
{karanama.committed_kitta} कित्ता
</td>
<td style={{ fontSize: 15, fontWeight: 100 }}>
{karanama.committed_kitta} कित्ता
</td>
</tr>
<tr>
<td style={{ height: 45, fontSize: 15 }}>
<u>रकम</u>
</td>
<td />
<td />
</tr>
</tbody>
</table>
<br />
<table style={{ width: "100%", border: "none" }}>
<tbody>
<tr style={{ border: "none" }}>
<th
style={{
textAlign: "left",
width: "50%",
border: "none",
fontSize: 17,
}}
>
<u>व्यक्तिगत विवरण:</u>
</th>
<th
style={{
textAlign: "left",
width: "50%",
border: "none",
fontSize: 17,
}}
>
<u>नागरिकताको हकमा:</u>
</th>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
पूरा नाम:{" "}
{karanama?.shareholder_address[0]?.shareholder?.first_name}{" "}
{karanama?.shareholder_address[0]?.shareholder
?.middle_name == "None"
? null
: karanama?.shareholder_address[0]?.shareholder
?.middle_name + " "}{" "}
{karanama?.shareholder_address[0]?.shareholder?.last_name}
</td>
{karanama?.shareholder?.middle_name == "None"
? null
: karanama?.shareholder?.middle_name + " "}
<td style={{ border: "none" }}>
नागरिकता नं:{" "}
{
karanama?.shareholder_address[0]?.shareholder
?.citizenship_number
}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
लिङ्ग:{" "}
{karanama?.shareholder_address[0]?.shareholder?.gender_type}
</td>
<td style={{ border: "none" }}>
जारी मिति:
{karanama?.citizenship[0]?.document_issue_date_bs}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
जन्म मिति:{" "}
{
karanama?.shareholder_address[0]?.shareholder
?.birth_date_ad
}
A.D.
</td>
<td style={{ border: "none" }}>
जारी जिल्ला:{" "}
{karanama?.citizenship[0]?.document_issue_place}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
वैवाहिक अवस्था:{" "}
{
karanama?.shareholder_address[0]?.shareholder
?.marital_status
}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
धर्म:{" "}
{karanama?.shareholder_address[0]?.shareholder?.ethnicity}
</td>
</tr>
<tr style={{ border: "none" }}>
<th
style={{
textAlign: "left",
width: "50",
border: "none",
fontSize: 17,
}}
>
<u></u>
</th>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}></td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>जिल्ला:</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
जारी मिति: {karanama?.citizenship[0]?.created_bs}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
समाप्ति मिति:{" "}
{karanama?.citizenship[0]?.document_expiry_date_bs}
</td>
</tr>
</tbody>
</table>
<p style={{ pageBreakBefore: "always" }} />
<div style={{ paddingTop: "0.5in" }}></div>
<h4 style={{ fontSize: 17, fontWeight: "bold" }}>
<u>एकाघर परिवारका सदस्यहरुको विवरण:</u>
</h4>
<table style={{ width: "100" }}>
<thead>
{/* <tr>
<th style={{ width: "25", fontSize: 15 }}>
</th>
<th style={{ width: "25", fontSize: 15 }}>
</th>
</tr> */}
</thead>
<tbody>
{karanama.shareholder_family.map((dat, i) => {
return (
<tr key={i}>
<td>{dat.relationship}</td>
<td>
{dat.first_name} {dat.middle_name} {dat.last_name}
</td>
</tr>
);
})}
</tbody>
</table>
<br />
<br />
<table style={{ width: "100", border: "none" }}>
<tbody>
<tr style={{ border: "none" }}>
<th
style={{
textAlign: "left",
width: "50",
border: "none",
fontSize: 17,
}}
>
<u>स्थायी ठेगाना:</u>
</th>
<th
style={{
textAlign: "left",
width: "50",
border: "none",
fontSize: 17,
}}
>
<u>हालको ठेगाना:</u>
</th>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
प्रदेश : {groupedAddresses.permanent[0]?.province?.name}
</td>
<td style={{ border: "none" }}>
प्रदेश : {groupedAddresses.temporary[0]?.province?.name}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
जिल्ला : {groupedAddresses.permanent[0]?.district?.name}
</td>
<td style={{ border: "none" }}>
जिल्ला : {groupedAddresses.temporary[0]?.district?.name}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
गा.पा/न.पा :
{groupedAddresses.permanent[0]?.municipality?.name}
</td>
<td style={{ border: "none" }}>
गा.पा/न.पा :
{groupedAddresses.temporary[0]?.municipality?.name}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
वडा नं :{groupedAddresses.permanent[0]?.ward}
</td>
<td style={{ border: "none" }}>
वडा नं :{groupedAddresses.temporary[0]?.ward}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
टाेल :{groupedAddresses.permanent[0]?.tole}
</td>
<td style={{ border: "none" }}>
टाेल :{groupedAddresses.temporary[0]?.tole}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>घर नं: </td>
<td style={{ border: "none" }}>घर नं:</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
फाेन नं : {karanama?.shareholder_phone[0]?.number}
</td>
<td style={{ border: "none" }}>
फाेन नं : {karanama?.shareholder_phone[0]?.number}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
इमेल ठेगाना : {karanama?.shareholder_email[0]?.email}
</td>
<td style={{ border: "none" }}>
इमेल ठेगाना : {karanama?.shareholder_email[0]?.email}
</td>
</tr>
</tbody>
</table>
<br />
<br />
<h4 style={{ fontSize: 17, fontWeight: "bold" }}>
<u>स्थायी लेखा नं:{karanama?.shareholder?.pan_number}</u>
</h4>
<table style={{ width: "60", height: 60 }}>
<tbody>
<tr />
</tbody>
</table>
<p>
<span style={{ fontSize: 17, fontWeight: "bold" }}>
<u>राेजगारकाे किसिम:</u>
</span>
<br />
<span style={{ fontSize: 15 }}>
तलव व्यवसाय
अन्य............................
</span>
</p>
<span style={{ fontSize: 15, fontWeight: "bold" }}>
संग्लग्न रहेको पेशा व्यवसायको विवरण
<span
style={{
fontStyle: "italic",
fontWeight: "bold",
fontSize: 15,
}}
>
(तीनवटा भन्दा बढी संस्थामा संग्लग्न भएमा छुट्टै विवरण पेश
गर्नुपर्ने)
</span>
</span>
<br />
<table style={{ width: "100" }}>
<tbody>
<tr>
<th style={{ width: "15", fontWeight: 100, fontSize: 15 }}>
क्र.स.
</th>
<th style={{ fontSize: 15, fontWeight: 100 }}>
संस्थाको नाम
</th>
<th style={{ fontSize: 15, fontWeight: 100 }}>ठेगाना</th>
<th style={{ fontSize: 15, fontWeight: 100 }}>पद</th>
<th style={{ fontSize: 15, fontWeight: 100 }}>
अनुमानित वार्षिक आम्दानी
</th>
</tr>
{karanama.shareholder_job.map((dat, index) => {
return (
<tr key={index}>
<td style={{ height: 50 }}>{index + 1}</td>
<td>{dat.company}</td>
<td></td>
<td>{dat.designation}</td>
<td>{dat.estimated_annual_income}</td>
</tr>
);
})}
{karanama.shareholder_job.length == 0 && (
<>
<tr>
<th
style={{ width: "15", fontWeight: 100, fontSize: 15 }}
></th>
<th style={{ fontSize: 15, fontWeight: 100 }}></th>
<th style={{ fontSize: 15, fontWeight: 100 }}></th>
<th style={{ fontSize: 15, fontWeight: 100 }}></th>
<th
style={{ fontSize: 15, fontWeight: 100, padding: 15 }}
></th>
</tr>
</>
)}
</tbody>
</table>
<p style={{ pageBreakBefore: "always" }} />
<div style={{ paddingTop: "0.5in" }}></div>
<h4 style={{ fontSize: 17, fontWeight: "bold" }}>
<u>नक्सा:</u>
</h4>
<table style={{ width: "100" }}>
<tbody>
<tr>
<th style={{ fontSize: 15, fontWeight: 100 }}>
स्थायी बसोवास गर्ने ठेगानाको मार्ग चित्र
</th>
<th style={{ fontSize: 15, fontWeight: 100 }}>
हाल बसोवास गर्ने ठेगानाको मार्ग चित्र
</th>
</tr>
<tr>
<td style={{ height: 300 }} />
<td />
</tr>
</tbody>
</table>
<p style={{ fontSize: 15 }}>
माथि उल्लेखित विवरण पुर्ण र सहि छ भन्ने घोषणा गर्दछु । साथै यस
कम्पनीको प्रबन्धपत्र, नियमावली र नीति निर्देशकहरुको अधिनमा रही
आफ्नो भूमिका निर्वाह गर्ने मन्जुरीकासाथ् उल्लेखित शेयर माग गर्ने
रकम समेत कम्पनीको निर्देशन बमोजिम दाखिला गराउनेछु ।
</p>
<br />
<h4>............................</h4>
<p style={{ fontSize: 15 }}>दस्तखत</p>
<br />
<table style={{ width: "100", border: "none" }}>
<tbody>
<tr style={{ border: "none" }}>
<th
style={{
textAlign: "left",
width: "50",
border: "none",
fontSize: 17,
}}
>
<u>इच्छाएको व्यक्ति:</u>
</th>
<th
style={{
textAlign: "left",
width: "50",
border: "none",
fontSize: 17,
}}
>
<u>ठेगाना:</u>
</th>
</tr>
{karanama.nominee.map((dat, i) => {
return (
<React.Fragment key={i}>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
नाम : {dat?.first_name}{" "}
{dat?.middle_name == "None"
? null
: dat?.middle_name + ""}
{dat?.last_name}
</td>
<td style={{ border: "none" }}>
जिल्ला :{" "}
{karanama?.nominee_address[i]?.district?.name}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
नाता : {dat?.relationship}
</td>
<td style={{ border: "none" }}>
गा.पा/न.पा :{" "}
{karanama.nominee_address[i]?.municipality?.name}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }} />
<td style={{ border: "none" }}>
वडा नं : {karanama?.nominee_address[i]?.ward}
</td>
</tr>
<tr style={{ border: "none" }}>
<td
style={{
border: "none",
fontSize: 17,
fontWeight: "bold",
}}
>
<u>नागरिकताको हकमा:</u>
</td>
<td style={{ border: "none" }}>
टाेल: {karanama?.nominee_address[i]?.tole}{" "}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
नागरिकता नं: {dat?.citizenship_number}
</td>
<td style={{ border: "none" }}>घर नं:</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>
जारी मिति: {dat?.created_bs}
</td>
<td style={{ border: "none" }}>
फाेन नं: {dat?.phone_number}
</td>
</tr>
<tr style={{ border: "none" }}>
<td style={{ border: "none" }}>जारी गर्ने जिल्ला:</td>
<td style={{ border: "none" }}>
मोबाइल नं: {dat?.phone_number}
</td>
</tr>
</React.Fragment>
);
})}
</tbody>
</table>
<br />
<br />
<p>
<span style={{ fontSize: 17, fontWeight: "bold" }}>
<u>संग्लग्न कागजात:</u>
</span>
<br />
<span style={{ fontSize: 15 }}>
१. नागरिकता/ राहदानी/ परिचय पत्रको प्रतिलिपि
</span>
<br />
<span style={{ fontSize: 15 }}>२. फोटो २ प्रति</span>
<br />
<span style={{ fontSize: 15 }}>
३. इच्छाएको व्यक्तिको नागरिकताको प्रतिलिपि
</span>
<br />
</p>
<p style={{ pageBreakBefore: "always" }} />
<div style={{ paddingTop: "0.5in" }}></div>
<p style={{ textAlign: "right", fontSize: 15 }}>
मिति: {trimmedDate}
</p>
<p style={{ fontSize: 15, marginTop: "4rem" }}>
श्री संचालक समिति,
</p>
<p style={{ fontSize: 15 }}>
बन्दीपुर केबलकार एण्ड टुरिजम लिमिटेड,
</p>
<p style={{ fontSize: 15 }}>बन्दीपुर गाउँपालिका वडा नं.–०४</p>
<h4 style={{ textAlign: "center", fontSize: 15 }}>
<u>विषय: शेयर खरिद गर्न पाऊँ।</u>
</h4>
<p style={{ fontSize: 15 }}>महोदय,</p>
<p style={{ fontSize: 15 }}>
{`उपरोक्त सम्बन्धमा यस कम्पनीले बिक्रीका लागि जगेडामा राखिएको शेयरहरु मध्ये ${karanama.committed_kitta}
कित्ता शेयर खरिद गर्ने मनसाय भएको हुदा प्रतिशेयर रु
/- दरको निम्न लिखित जगेडा शेयरहरु खरिद गर्नको लागि यो निवेदन पेश
गरेको छु।`}
</p>
<br />
<br />
<h4 style={{ fontSize: 15, marginLeft: "30rem" }}>
.......................
</h4>
<p style={{ fontSize: 15, marginLeft: "32rem", textAlign: "end" }}>
निवेदक
</p>
<p style={{ fontSize: 15, marginLeft: "32rem", textAlign: "end" }}>
नाम: {karanama?.shareholder?.first_name}{" "}
{karanama?.shareholder?.middle_name == "None"
? null
: karanama?.shareholder?.middle_name + " "}
{karanama?.shareholder?.last_name}
</p>
<p
style={{ fontSize: 15, marginLeft: "32rem", textAlign: "end" }}
>{` ना प्रा न: ${karanama?.shareholder?.citizenship_number}`}</p>
</>
</div>
</>
</div>
);
};
export default Karanama;
Source