<file_sep>import React, { useContext } from 'react';
import './ProfileComponent.scss';
import {DataContext} from '../../App';
import user from './Assests/user.png';

const ProfileComponent = () => {
    const [data, setData] = useContext(DataContext);

    console.log(data)
    return(
        <div className='profile-component'>
            <div className='greetings-text'>
                <div className='greetings'>Hello,</div>
                <div className='user-name'>{data.userName}!</div>
                <span className='additional-text'>Copy your bio link and paste it in your</span>
            </div>
            <div className='profile-image'>
                <img className='user-img' src={user} alt='User'/>
            </div>
        </div>
    )
}

export default ProfileComponent;<file_sep>import React, { useContext, useEffect, useState } from "react";
import CardComponent from '../CardComponent/CardComponent';
import  "./CardListComponent.scss";
import { DataContext } from '../../App';
import Decrease from './Assests/decrease.png';
import increase from './Assests/increase.png';

const CardListComponent = () => {

    const [Data, setData] = useContext(DataContext);
    const [CardData, setCardData] = useState([])

    useEffect(() => {
        let tempCardJson = [
            {
                title : 'Total Bookings',
                value : Data.totalBookings,
            },
            {
                title : 'Pending Approval',
                value : Data.pendingApproval,
                color : '#f35162'
            },
            {
                title : 'New Clients this month',
                value : Data.newClientsthismonth,
                img:increase
            },
            {
                title : 'Returning Clients',
                value : Data.returningClients+'%',
                img:Decrease
            }
        ]
        setCardData(tempCardJson)
    }, [Data])

    return(
        <div className='card-list-component'>
            <div className='card-list-title'>Quick Stats</div>
            {
                CardData.map((data,index) => {
                    return(
                        <CardComponent key={index} cardData={data}/>
                    )
                })
            }
        </div>
    )
}

export default CardListComponent;<file_sep>import React, { useContext } from 'react';
import BookingsComponent from '../BookingsComponent/BookingsComponent';
import { DataContext } from '../../App';
import './BookingListComponent.scss';

const BookingListComponent = () => {
    const [data, setData] = useContext(DataContext);
    return(
        <div className='bookings-list'>
            {
                data.bookings && data.bookings.length > 0 ? 
                data.bookings.map((booking) => {
                    return(
                        <BookingsComponent data={booking} />
                    )
                }) : ''
            }
        </div>
    )
}

export default BookingListComponent<file_sep>import React from "react";
import './SideBarComponent.scss'
import dashboardActive from './Assests/dashboard-active.png';
import graph from './Assests/graph.png';
import Logout from './Assests/logout.png';

const SideBarComponent = () => {
    return(
        <div className='sidebar-component'>
            <div className='sidebar-title'>
                <h1 className='title'>S</h1>
            </div>
            <div className='menu-icons'>
                <div className='active-dashboard=icon icons selected'>
                    <img className='sidebar-icons selected' src={dashboardActive} />
                </div>
                <div className='chart-icon'>
                    <img className='sidebar-icons' src={graph} />
                </div>
            </div>
            <div className='logout-icon'>
                <img className='logout-img' src={Logout} alt='logout' />
            </div>
        </div>
    )
}

export default SideBarComponent;<file_sep>import { useState, createContext, useEffect } from 'react';
import './App.css';
import BookingListComponent from './Components/BookingListComponent/BookingListComponent';
import SideBarComponent from './Components/SideBarComponent/SideBarComponent';
import SearchComponent from "./Components/SearchComponent/SearchComponent";
import ProfileComponent from "./Components/ProfileComponent/ProfileComponent";
import NotificationIcon from './Assests/Notifications.png'
import RemainderComponent from './Components/RemainderComponent/RemainderComponent';
import CardListComponent from './Components/CardListComponent/CardListComponent';
import TabComponent from './Components/TabComponent/TabComponent';
export const DataContext = createContext( [ {}, () => {}] );

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetch('https://raw.githubusercontent.com/arun6202/reactjs_assignment/main/data.json')
      .then(response => response.json())
        .then(result => setData(result))
  }, [])
  return (
    <div className="App">
      <div id='dashboard-page' className='dashboard-page'>
          <div className='side-bar'>
            <SideBarComponent />
          </div>
          <DataContext.Provider value = {[data,setData]}>
            <div className='main-container'>
              <h1 className='heading'>Dashboard</h1>
              <span className='welcome-text'>Welcome Back!</span>
              <CardListComponent />
              <TabComponent />
              <BookingListComponent />
            </div>
            <div className='right-container'>
              <div className='header'>
                <div className='search'>
                  <SearchComponent />
                </div>
                <div className='notifications'>
                  <img className='notification-icon' src={NotificationIcon} alt='Notification Icon' />
                </div>
              </div>
              <ProfileComponent />
              <RemainderComponent />
            </div>
          </DataContext.Provider>
      </div>
    </div>
  );
}

export default App;
