chore: prettier output

README.md

@@ -16,7 +16,7 @@
 </h4>
 
 [![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/tailwarden/komiser/blob/master/LICENSE) [![Docker Stars](https://img.shields.io/docker/pulls/mlabouardy/komiser.svg)](https://hub.docker.com/r/mlabouardy/komiser) 
-[![ELv2 License](https://img.shields.io/badge/license-ELv2-green)](LICENSE) [![CircleCI](https://circleci.com/gh/tailwarden/komiser/tree/master.svg?style=svg&circle-token=d35b1c7447995e60909b24fd316fef0988e76bc8)](https://circleci.com/gh/tailwarden/komiser/tree/master) [![Docker Stars](https://img.shields.io/github/issues/tailwarden/komiser.svg)](https://github.com/tailwarden/komiser/issues) [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.tailwarden.com/)
+[![ELv2 License](https://img.shields.io/badge/license-ELv2-green)](LICENSE) [![Docker Stars](https://img.shields.io/github/issues/tailwarden/komiser.svg)](https://github.com/tailwarden/komiser/issues) [![Discord](https://badgen.net/badge/icon/discord?icon=discord&label)](https://discord.tailwarden.com/)
 
 Komiser is an open-source cloud-agnostic resource manager. It integrates with multiple cloud providers (including AWS, Azure, Civo, Digital Ocean, OCI, Linode, Tencent and Scaleway), builds a cloud asset inventory, and helps you break down your cost at the resource level 💰
 
@@ -39,9 +39,9 @@ brew install komiser
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**
 
-- [What is Komiser?](#what-is-komiser-)
+- [What is Komiser? 🤷](#what-is-komiser-)
   - [Who is using it?](#who-is-using-it)
-- [Getting started](#getting-started-)
+- [Getting started 👇](#getting-started-)
   - [Download](#download)
   - [Installation on AWS](#installation-on-aws)
     - [Connect Komiser CLI to your AWS account.](#connect-komiser-cli-to-your-aws-account)
@@ -52,14 +52,16 @@ brew install komiser
   - [Installation on OCI](#installation-on-oci)
   - [Installation on Digital Ocean](#installation-on-digital-ocean)
   - [Installation on Linode](#installation-on-linode)
-  - [Installation on Tencent](#installation-on-tencent-cloud)
+  - [Installation on Tencent Cloud](#installation-on-tencent-cloud)
   - [Installation on Scaleway](#installation-on-scaleway)
-- [Documentation](#documentation-)
+- [Documentation 📖](#documentation-)
   - [Jump right in:](#jump-right-in)
-- [Bugs and feature requests](#bugs-and-feature-requests-)
-- [Roadmap and Contributing](#roadmap-and-contributing-%EF%B8%8F)
-- [Users](#users-)
-- [Versioning](#versioning-)
+- [Bugs and feature requests 🐞](#bugs-and-feature-requests-)
+- [Roadmap and Contributing 🛣️](#roadmap-and-contributing-️)
+    - [Watch! :](#watch-)
+- [Users 🧑‍🤝‍🧑](#users-)
+- [Versioning 🧮](#versioning-)
+- [Contributors](#contributors)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 

dashboard/components/banner/Banner.tsx

@@ -40,7 +40,7 @@ function Banner({ githubStars }: BannerProps) {
             alt="Github logo"
           />
           <span>Star Komiser</span>
-          <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 py-2.5 px-3">
+          <div className="flex h-full items-center justify-center gap-2 border-l border-white/10 bg-white/10 px-3 py-2.5">
             <StarIcon
               width={16}
               height={16}

dashboard/components/card/Card.tsx

@@ -12,7 +12,7 @@ export type CardProps = {
 
 function Card({ label, value, tooltip, icon, formatter }: CardProps) {
   return (
-    <div className="relative flex w-full items-center gap-4 rounded-lg bg-white py-8 px-6 text-black-900 transition-colors">
+    <div className="relative flex w-full items-center gap-4 rounded-lg bg-white px-6 py-8 text-black-900 transition-colors">
       <div className="rounded-lg bg-komiser-100 p-4" data-testid="icon">
         {icon}
       </div>

dashboard/components/dashboard/components/cloud-map/DashboardCloudMapCard.tsx

@@ -17,7 +17,7 @@ function DashboardCloudMapCard({ data }: DashboardCloudMapCardProps) {
       data-testid="cloudMap"
       className={`${
         isOpen ? 'fixed inset-0 z-30 origin-left animate-scale' : ''
-      } w-full rounded-lg bg-white py-4 px-6 pb-6`}
+      } w-full rounded-lg bg-white px-6 py-4 pb-6`}
     >
       <div className="-mx-6 flex items-center justify-between border-b border-black-200/40 px-6 pb-4">
         <div>

dashboard/components/dashboard/components/cloud-map/DashboardCloudMapError.tsx

@@ -8,7 +8,7 @@ function DashboardCloudMapError({ fetch }: DashboardCloudMapErrorProps) {
   return (
     <div
       data-testid="error"
-      className="min-h-[396px] w-full rounded-lg bg-white py-4 px-6 pb-6"
+      className="min-h-[396px] w-full rounded-lg bg-white px-6 py-4 pb-6"
     >
       <div className="-mx-6 flex items-center justify-center gap-6 border-b border-black-200/40 px-6 pb-4">
         <p className="text-sm text-black-400">

dashboard/components/dashboard/components/cloud-map/DashboardCloudMapSkeleton.tsx

@@ -2,7 +2,7 @@ function DashboardCloudMapSkeleton() {
   return (
     <div
       data-testid="loading"
-      className="min-h-[396px] w-full animate-pulse rounded-lg bg-white py-4 px-6 pb-6"
+      className="min-h-[396px] w-full animate-pulse rounded-lg bg-white px-6 py-4 pb-6"
     >
       <div className="-mx-6 flex items-center justify-between border-b border-black-200/40 px-6 pb-4">
         <div>

dashboard/components/dashboard/components/cloud-map/DashboardCloudMapTooltip.tsx

@@ -15,7 +15,7 @@ function DashboardCloudMap({
     <>
       {tooltip && sumOfResources && (
         <div
-          className="absolute z-20 flex animate-fade-in flex-col gap-2 rounded-lg bg-[#013220] py-2 px-3 text-xs text-black-300 opacity-0"
+          className="absolute z-20 flex animate-fade-in flex-col gap-2 rounded-lg bg-[#013220] px-3 py-2 text-xs text-black-300 opacity-0"
           style={{
             top: `${tooltip.y - 60}px`,
             left: `${tooltip.x + 10}px`
@@ -42,7 +42,7 @@ function DashboardCloudMap({
               100
             ).toFixed(1)}%`}</span>
           </span>
-          <div className="-mx-3 flex items-center gap-2 border-t border-white/30 px-3 pt-2 pb-1">
+          <div className="-mx-3 flex items-center gap-2 border-t border-white/30 px-3 pb-1 pt-2">
             <span className="text-white">Click to discover the resources</span>
             <LinkIcon className="w-[20px]" />
           </div>

dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerError.tsx

@@ -19,7 +19,7 @@ function DashboardCostExplorerError({
   const rows: number[] = Array.from(Array(8).keys());
 
   return (
-    <div className="w-full rounded-lg bg-white py-4 px-6 pb-6">
+    <div className="w-full rounded-lg bg-white px-6 py-4 pb-6">
       <div className="-mx-6 flex items-center justify-center gap-6 border-b border-black-200/40 px-6 pb-4">
         <p className="text-sm text-black-400">
           There was an error loading the cost explorer.

dashboard/components/dashboard/components/cost-explorer/DashboardCostExplorerSkeleton.tsx

@@ -1,7 +1,7 @@
 function DashboardCostExplorerSkeleton() {
   const rows: number[] = Array.from(Array(8).keys());
   return (
-    <div className="w-full animate-pulse rounded-lg bg-white py-4 px-6 pb-6">
+    <div className="w-full animate-pulse rounded-lg bg-white px-6 py-4 pb-6">
       <div className="-mx-6 flex flex-wrap items-center justify-between border-b border-black-200/40">
         <div className="px-6 pb-4">
           <div className="h-3 w-24 rounded-lg bg-komiser-200/50"></div>

dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerCard.tsx

@@ -35,7 +35,7 @@ function DashboardResourcesManagerCard({
     chartData && chartData.labels && chartData.labels.length > 0;
 
   return (
-    <div className="w-full rounded-lg bg-white py-4 px-6 pb-6">
+    <div className="w-full rounded-lg bg-white px-6 py-4 pb-6">
       <div className="-mx-6 flex items-center justify-between border-b border-black-200/40 px-6 pb-4">
         <div>
           <p className="text-sm font-semibold text-black-900">

dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerError.tsx

@@ -8,7 +8,7 @@ function DashboardResourcesManagerError({
   fetch
 }: DashboardResourcesManagerErrorProps) {
   return (
-    <div className="flex min-h-[360px] w-full flex-col gap-4 overflow-hidden rounded-lg bg-white py-4 px-6 pb-6">
+    <div className="flex min-h-[360px] w-full flex-col gap-4 overflow-hidden rounded-lg bg-white px-6 py-4 pb-6">
       <div className="-mx-6 flex items-center justify-center gap-6 border-b border-black-200/40 px-6 pb-4">
         <p className="text-sm text-black-400">
           There was an error loading the resources manager.

dashboard/components/dashboard/components/resources-manager/DashboardResourcesManagerSkeleton.tsx

@@ -1,6 +1,6 @@
 function DashboardResourcesManagerSkeleton() {
   return (
-    <div className="flex min-h-[360px] w-full animate-pulse flex-col gap-4 overflow-hidden rounded-lg bg-white py-4 px-6 pb-6">
+    <div className="flex min-h-[360px] w-full animate-pulse flex-col gap-4 overflow-hidden rounded-lg bg-white px-6 py-4 pb-6">
       <div className=" -mx-6 flex items-center justify-between border-b border-black-200/40">
         <div className="px-6 pb-4">
           <div className="h-3 w-48 rounded-lg bg-komiser-200/50"></div>

dashboard/components/input/Input.tsx

@@ -68,7 +68,7 @@ function Input({
         <input
           type={type}
           name={name}
-          className={`peer w-full rounded bg-white px-4 pt-[1.75rem] pb-[0.75rem] text-sm text-black-900 caret-primary outline outline-black-200 focus:outline-2 focus:outline-primary ${
+          className={`peer w-full rounded bg-white px-4 pb-[0.75rem] pt-[1.75rem] text-sm text-black-900 caret-primary outline outline-black-200 focus:outline-2 focus:outline-primary ${
             isValid === false && `outline-error-600 focus:outline-error-600`
           }`}
           placeholder=" "
@@ -90,7 +90,7 @@ function Input({
           data-lpignore="true"
           data-form-type="other"
         />
-        <span className="pointer-events-none absolute left-4 bottom-[1.925rem] origin-left scale-75 select-none font-normal text-black-300 transition-all peer-placeholder-shown:left-4 peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
+        <span className="pointer-events-none absolute bottom-[1.925rem] left-4 origin-left scale-75 select-none font-normal text-black-300 transition-all peer-placeholder-shown:bottom-[1.15rem] peer-placeholder-shown:left-4 peer-placeholder-shown:scale-[87.5%] peer-focus:bottom-[1.925rem] peer-focus:scale-75">
           {label}
         </span>
       </div>

dashboard/components/inventory/components/InventoryActiveFilters.tsx

@@ -28,7 +28,7 @@ function InventoryActiveFilters({
   return (
     <>
       {hasFilters && (
-        <div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg bg-white py-2 px-6">
+        <div className="mb-6 flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg bg-white px-6 py-2">
           <div className="h-full text-sm text-black-400">Filters</div>
           {displayedFilters &&
             displayedFilters.map((activeFilter, idx) => (

dashboard/components/inventory/components/InventoryFilterDropdown.tsx

@@ -48,7 +48,7 @@ export default function InventoryFilterDropdown({
       {/* Dropdown transparent backdrop */}
       <div
         onClick={toggle}
-        className="fixed top-0 left-0 z-20 hidden h-screen w-screen animate-fade-in bg-transparent opacity-0 sm:block"
+        className="fixed left-0 top-0 z-20 hidden h-screen w-screen animate-fade-in bg-transparent opacity-0 sm:block"
       ></div>
       <div
         className={`absolute ${position} z-[21] inline-flex min-w-[16rem] max-w-[21rem] rounded-lg bg-white p-4 text-sm shadow-xl`}

dashboard/components/inventory/components/InventoryLayout.tsx

@@ -51,7 +51,7 @@ function InventoryLayout({
         <nav
           className={`fixed ${
             displayBanner ? 'mt-[145px]' : 'mt-[73px]'
-          } left-0 bottom-0 top-0 z-20 flex w-[17rem] flex-col gap-4 bg-white p-6`}
+          } bottom-0 left-0 top-0 z-20 flex w-[17rem] flex-col gap-4 bg-white p-6`}
         >
           <button
             onClick={() => {
@@ -80,7 +80,7 @@ function InventoryLayout({
                   className="flex w-full items-center rounded-lg border border-black-200 px-4 py-3 pl-10 text-sm font-medium text-black-400 transition-colors hover:border-black-300 focus-visible:outline-primary"
                 />
                 <div
-                  className={`absolute top-[0.95rem] left-4 ${
+                  className={`absolute left-4 top-[0.95rem] ${
                     query ? 'cursor-pointer' : ''
                   }`}
                 >

dashboard/components/inventory/components/InventorySearchBar.tsx

@@ -21,12 +21,12 @@ function InventorySearchBar({
       {!error && (
         <div className="relative rounded-lg rounded-b-none">
           {!query ? (
-            <div className="absolute top-[1.625rem] left-6">
+            <div className="absolute left-6 top-[1.625rem]">
               <SearchIcon width={16} height={16} />
             </div>
           ) : (
             <div
-              className="absolute top-[1.7rem] left-6 cursor-pointer"
+              className="absolute left-6 top-[1.7rem] cursor-pointer"
               onClick={() => setQuery('')}
             >
               <CloseIcon width={16} height={16} />
@@ -44,7 +44,7 @@ function InventorySearchBar({
             data-form-type="other"
             maxLength={64}
           />
-          <div className="absolute top-[14px] right-4">
+          <div className="absolute right-4 top-[14px]">
             <ExportCSV setToast={setToast} />
           </div>
         </div>

dashboard/components/inventory/components/InventoryStatsCards.tsx

@@ -33,7 +33,7 @@ function InventoryStatsCards({
               router.query.view ? 'lg:grid-cols-4' : 'lg:grid-cols-3'
             } gap-8`}
           >
-            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  py-8  px-6 text-black-900 transition-colors">
+            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
               <div className=" rounded-lg bg-komiser-100 p-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -67,7 +67,7 @@ function InventoryStatsCards({
               </div>
               <Tooltip>Number of active cloud services</Tooltip>
             </div>
-            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  py-8  px-6 text-black-900 transition-colors">
+            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
               <div className=" rounded-lg bg-komiser-100 p-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -108,7 +108,7 @@ function InventoryStatsCards({
                 Number of regions where you have active cloud services
               </Tooltip>
             </div>
-            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  py-8  px-6 text-black-900 transition-colors">
+            <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
               <div className=" rounded-lg bg-komiser-100 p-4">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -143,7 +143,7 @@ function InventoryStatsCards({
               <Tooltip>Up-to-date monthly cost</Tooltip>
             </div>
             {router.query.view && hiddenResources && (
-              <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  py-8  px-6 text-black-900 transition-colors">
+              <div className="relative flex w-full items-center gap-4 rounded-lg bg-white  px-6  py-8 text-black-900 transition-colors">
                 <div className=" rounded-lg bg-komiser-100 p-4">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"