All-Resources/[jobs]/mBossmenu/html/components/overall/index.html

<div class="overall">
    <div class="employees-header">
        <playerinformation :theme="companyData.theme" :playerName="playerInfo.name" :playerJob="formattedJob " :playerPP="playerInfo.pp">
        </playerinformation>
        <h2>{{companyData.companylabel.toUpperCase()}}</h2>
     
    </div>
    <div class="seperator"></div>
    <div class="overall-container">
        <div class="overall-wrapper business-overall-wrapper">
            <h1 class="overall-container-header">{{locales.business_overall}}</h1>
            <div class="business-overall" :class="{[companyData.theme]:true}" >
                <div class="business-overall-text-container">
                    <h1>{{locales.business_name}}</h1>
                    <div class="business-overall-box" :class="{[companyData.theme]:true}">
                        <inlinesvg src="./assets/svg/business-name-icon.svg"></inlinesvg>
                        <p>{{companyData.companylabel.toUpperCase()}}</p>
                    </div>
                </div>
               
                <div class="business-overall-text-container">
                    <h1>{{locales.business_creation_date}}</h1>
                    <div class="business-overall-box" :class="{[companyData.theme]:true}">
                        <inlinesvg src="./assets/svg/date-icon.svg"></inlinesvg>
                        <p>{{SecondsToDate(companyData.creationdate)}}</p>
                    </div>
                </div>
                <div class="business-overall-text-container">
                    <h1>{{locales.business_total_employees}}</h1>
                    <div class="business-overall-box" :class="{[companyData.theme]:true}">

                        <inlinesvg src="./assets/svg/total-employees-container.svg"></inlinesvg>
                        <p>{{companyData.employees.length}}</p>
                    </div>
                </div>
                <div class="business-overall-text-container">
                    <h1>{{locales.business_total_ranks}}</h1>
                    <div class="business-overall-box" :class="{[companyData.theme]:true}">

                        <inlinesvg src="./assets/svg/total-ranks-icon.svg"></inlinesvg>
                        <p>{{ranks.length}}</p>
                    </div>
                </div>
                <div class="business-overall-text-container">
                    <h1>{{locales.business_total_items}}</h1>
                    <div class="business-overall-box" :class="{[companyData.theme]:true}">

                        <inlinesvg src="./assets/svg/total-item-icon.svg"></inlinesvg>
                        <p> {{Object.keys(companyInventory).length}}</p>
                    </div>
                </div>

                <div class="business-overall-text-container">
                    <h1>{{locales.business_boss}}</h1>
                    <div class="business-overall-box" :class="{[companyData.theme]:true}">

                        <inlinesvg src="./assets/svg/star-icon.svg"></inlinesvg>
                        <p>{{getBoss}}</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="overall-wrapper company-money-details-wrapper"  >
            <h1 class="overall-container-header">{{locales.company_money_details}}</h1>
            <div class="company-money-details" :class="{[companyData.theme]:true}">
                <div class="card-container"  :style="{backgroundImage: 'url('+getCardBG+')'}" style="height:12.8125rem">
                    <img class="card-logo" src="./assets/images/job-logo.png" />
                    <p class="card-job-text">{{companyData.companylabel.toUpperCase()}}</p>
                    <img class="bank-logo" src="./assets/images/bank-logo.png" />
                    <p class="vault-company-money-text">${{vaultData.companyMoney.toLocaleString()}}</p>
                    <img class="chip-logo" src="./assets/images/chip.png" />

                </div>
                <div class="business-overall-text-container">
                    <h1>{{locales.business_income}}</h1>
                    <div class="business-income-box">
                        <inlinesvg src="./assets/svg/income-icon.svg"></inlinesvg>
                        <p>${{companyData.vault_income}}</p>

                    </div>
                </div>
                <div class="business-overall-text-container">
                    <h1>{{locales.business_expense}}</h1>
                    <div class="business-expense-box">
                        <inlinesvg src="./assets/svg/expense-icon.svg"></inlinesvg>
                        <p>${{companyData.vault_expense}}</p>
                    </div>
                </div>
                <div class="business-overall-text-container">
                    <h1>{{locales.most_contribitors}}</h1>
                    <div class="business-contribitors">
                        <div v-for="(data, index) in getMostContributors" :style="{display : index <= 2 ? 'flex' : 'none'}" :key="index" class="business-contribitor">
                            <div class="business-contribitor-box">
                                ${{data.amount}}
                            </div>
                            <div class="business-contribitor-pp-holder" :class="{[companyData.theme]:true}">
                                <img :src="data.avatar" />

                            </div>
                            <p>{{data.name}}</p>


                        </div>
                      
                    </div>
                </div>
            </div>
        </div>
        <div class="overall-wrapper business-adjustments-wrapper">
            <h1 class="overall-container-header">{{locales.business_adjustments}}</h1>
            <div class="business-adjustments" :class="{[companyData.theme]:true}">
                <div class="business-logo-container">
                    <!-- <inlinesvg src="./assets/svg/business-icon.svg"></inlinesvg> -->
                    <!-- <p>No logo for this business</p> -->
                    <img :src="newLogo || companyData.logo">
                </div>
                <div class="business-adjustments-link-container">
                    <h2>{{locales.by_link}}</h2>
                    <div class="business-adjustments-input-holder">
                        <inlinesvg class="link-icon" src="./assets/svg/link-icon.svg"></inlinesvg>
                        <input v-model="newLogo" type="text" :placeholder="locales.insert_image">
                    </div>
                   
                </div>
                <div class="upload-button" @click="UploadNewLogo">{{locales.upload}}</div>
                <p class="recommended-size" v-html="locales.recommended_size"></p>
                <div class="theme-buttons-container">
                    <h1>{{locales.change_theme}}</h1>
                    <div class="theme-buttons">
                        <div class="theme-button black" :class="{selected : companyData.theme == 'black'}" @click="ChangeTheme('black')"></div>
                        <div class="theme-button blue" :class="{selected : companyData.theme == 'blue'}" @click="ChangeTheme('blue')"></div>
                        <div class="theme-button red" :class="{selected : companyData.theme == 'red'}" @click="ChangeTheme('red')"></div>
                        <div class="theme-button purple" :class="{selected : companyData.theme == 'purple'}" @click="ChangeTheme('purple')"></div>
                        <div class="theme-button yellow" :class="{selected : companyData.theme == 'yellow'}"  @click="ChangeTheme('yellow')"></div>
                        <div class="theme-button green" :class="{selected : companyData.theme == 'green'}" @click="ChangeTheme('green')"></div>

                    </div>
                </div>
                <div class="delete-business-button" @click="DeleteBusiness(companyData.company)">
                    {{locales.delete_business}}
                </div>
            </div>
        </div>
    </div>
</div>