add price and btn buy

actions/shares/shares.ts

@@ -4,6 +4,8 @@ import {
   IApiResponseShares,
   IFinancialInstrument,
   IPagination,
+  IApiResponseShareItem,
+  IInstrument,
 } from '@/typing';
 
 /**
@@ -38,11 +40,23 @@ export const getShares = async (
 
 export const getSharesByTicker = async (ticker: string): Promise<any> => {
   const { data } = await axios.get<{
-    data: IFinancialInstrument[];
+    data: IInstrument;
   }>(`${API_BASE_URL}/sharesByTicker`, {
     params: { ticker },
   });
   return {
-    data: data,
+    data,
   };
 };
+
+export const getLastPriceByTicker = async (ticker: string): Promise<any> => {
+  const { data } = await axios.get<{
+    data: IInstrument;
+  }>(`${API_BASE_URL}/lastPriceByTicker`, {
+    params: { ticker },
+  });
+  return {
+    data,
+  };
+};
+

app/[slug]/page.tsx

@@ -1,31 +1,25 @@
 import React from 'react';
 import styles from './styles.module.scss';
 import { ShareIntro } from '@/components/ShareIntro';
-import { Button } from '@/components/Button';
+import { BuyStock } from '@/components/BuyStock';
 import { serviceShares } from '@/services';
 
-const data = {
-  brand: { bg: '#1a5ea0', color: 'white' },
-};
-
-const ItemPage = async ({ params }: { params: { slug: string } }) => {
-  const res = await serviceShares.getByTicker(params.slug);
-  console.log(res, res)
+const PageStock = async ({ params }: { params: { slug: string } }) => {
+  const { data } = await serviceShares.getByTicker(params.slug);
+  const { data: dataLastPrice } = await serviceShares.getLastPriceByTicker(
+    params.slug,
+  );
   return (
     <div className={styles.page}>
       <div className={styles.main}>
         {/*@ts-ignore*/}
         <ShareIntro value={data} />
       </div>
       <div className={styles.side}>
-        <div>
-          <div>
-            <Button>BUY</Button>
-          </div>
-        </div>
+        <BuyStock info={dataLastPrice} />
       </div>
     </div>
   );
 };
 
-export default ItemPage;
+export default PageStock;

app/[slug]/styles.module.scss

@@ -7,8 +7,8 @@
 .main {
   flex: 1;
   max-width: 920px;
-  margin-right: 120px;
+  margin-right: 30px;
 }
 .side {
-
+  flex: 0 0 300px
 }

app/globals.css

@@ -2,6 +2,7 @@
   --box-max-width: 1100px;
   --body-font-size: 16px;
   --body-background-color: #f6f7f8;
+  --body-border-color: #d1d1e4;
   --body-text-color: #000000;
   --logo-background-color: #2196f3;
   --logo-text-color: #ffffff;

app/loading.module.scss

@@ -0,0 +1,5 @@
+.page {
+  min-height: 775px;
+  max-width: var(--box-max-width);
+  margin: 0 auto;
+}

app/loading.tsx

@@ -1,6 +1,8 @@
+import styles from './loading.module.scss';
+
 export default function Loading() {
   return (
-    <div style={{ minHeight: 775 }} className="loading-spinner">
+    <div className={styles.page}>
       <div className="spinner"></div>
       <p>Loading dashboard...</p>
     </div>

components/BuyStock/BuyStock.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './styles.module.scss';
+
+interface Price {
+  units: string;
+  nano: number;
+}
+
+interface PriceInfo {
+  figi: string;
+  price: Price;
+  time: string;
+  instrumentUid: string;
+  lastPriceType: string;
+}
+
+export const BuyStock: React.FC<{ info: PriceInfo }> = ({ info }) => {
+  const formattedDate = new Date(info.time).toLocaleString();
+  const formattedPrice = parseFloat(
+    `${info.price.units}.${info.price.nano / 1e9}`,
+  ).toFixed(2);
+
+  return (
+    <div className={styles.box}>
+      <div>Date: {formattedDate}</div>
+      <div>Price: {formattedPrice}</div>
+      <button className={styles.buyButton}>Buy</button>
+    </div>
+  );
+};

components/BuyStock/index.ts

@@ -0,0 +1 @@
+export * from './BuyStock';

components/BuyStock/styles.module.scss

@@ -0,0 +1,21 @@
+.box {
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  width: 300px;
+  text-align: center;
+}
+
+.buyButton {
+  margin-top: 15px;
+  padding: 10px 20px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.buyButton:hover {
+  background-color: #45a049;
+}

components/Profile/ProfileBalance/ProfileBalance.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
 
 export const ProfileBalance: FC = () => {
-  return <span>1000 $</span>;
+  return <span>1000</span>;
 };

components/ShareIntro/ShareIntro.tsx

@@ -1,30 +1,21 @@
 import React from 'react';
 import styles from './styles.module.scss';
-import { IFinancialInstrument } from '@/typing';
 import { generateGradient } from '@/utils';
 
-type Props = {
-  value: IFinancialInstrument;
-};
-
-export const ShareIntro = ({ value }: Props) => {
+export const ShareIntro = ({ value }: any) => {
   return (
     <div
       style={{
-        background: generateGradient(value.brand.bg),
-        color: value.brand.color,
+        background: generateGradient(value.brand.logoBaseColor),
+        color: value.brand.textColor,
       }}
       className={styles.intro}
     >
-      <div className={styles.title}>APPLE</div>
+      <div className={styles.title}>{value.name}</div>
       <div className={styles.info}>
-        <div className={styles.item}>
-          <div className={styles.subtitle}>Profitability for six months</div>
-          <div className={styles.desc}>6%</div>
-        </div>
         <div className={styles.item}>
           <div className={styles.subtitle}>Sector</div>
-          <div className={styles.desc}>Financial sector</div>
+          <div className={styles.desc}>{value.sector}</div>
         </div>
       </div>
     </div>

services/shares/index.ts

@@ -1,4 +1,4 @@
-import { getShares, getSharesByTicker } from '@/actions/shares';
+import { getLastPriceByTicker, getShares, getSharesByTicker } from '@/actions/shares';
 import { IApiResponseShares, IPagination } from '@/typing';
 
 class ServiceShares {
@@ -20,6 +20,14 @@ class ServiceShares {
     } catch (e) {}
   }
 
+  async getLastPriceByTicker(ticker: string) {
+    try {
+      const res = await getLastPriceByTicker(ticker);
+      return res;
+    } catch (e) {}
+  }
+
+
   handleError(err: Error) {}
 }
 

typing/index.ts

@@ -63,7 +63,7 @@ export interface IInstBrand {
   textColor: string;
 }
 
-interface IInstrument {
+export interface IInstrument {
   figi: string;
   ticker: string;
   classCode: string;
@@ -101,3 +101,20 @@ interface IInstrument {
   first1dayCandleDate: string;
   brand: IBrand;
 }
+
+export interface IApiResponseShareItem {
+  data: IInstrument;
+}
+
+export interface IPrice {
+  units: string;
+  nano: number;
+}
+
+export interface IPriceInfo {
+  figi: string;
+  price: IPrice;
+  time: string;
+  instrumentUid: string;
+  lastPriceType: string;
+}