Feature: color of the % number in the dashboard should be based on +/-

[suitedaces]

In our dashboard, under revenue, subscription, sales, etc: where you see <+number%> last month, i want the number to be green if it's a positive % change, and red if it's a negative percentage change

[dev-ape-ai[bot]]

Hello, @suitedaces! 👋

To make the percentage change color in the dashboard (under revenue, subscription, sales etc) change depending on whether it's positive or negative, we would need to add some conditional rendering in the parts of the code that manage the display of these percentages.

From my search in the codebase of sales-dashboard, I can see in the file app/(dashboard)/dashboard/page.tsx that sections like "Total Revenue", "Active Now", "Sales", etc. present the percentage change with a format similar to +180.1% from last month. This uses the text-xs text-muted-foreground classes for styling.

To achieve a colored result based on positive or negative values, we'd look at styling this differently when the data represents a decrease. We would encapsulate the percentage in a span and dynamically add a class depending on whether the value is positive or negative.

Here are the relevant excerpts from the codebase:

<CardContent>
  <div className="text-2xl font-bold">+2350</div>
  <p className="text-xs text-muted-foreground">
    +180.1% from last month
  </p>
</CardContent>

<CardContent>
  <div className="text-2xl font-bold">+12,234</div>
  <p className="text-xs text-muted-foreground">
    +19% from last month
  </p>
</CardContent>

The web search results suggest using CSS and JS to identify positive and negative values and style them accordingly. We should be able to achieve this by adding classes that correspond to the + and - values (e.g., red or green). One way is to use JavaScript to check if the value is negative, then assign a different CSS class to the element accordingly.

Here are the relevant web search links:

• Making Negative Numbers turn Red using CSS and Javascript
• Set int color based on value being positive or negative using CSS

Hope this helps. If we need further clarification or details, feel free to ask. 😊

[suitedaces]

@devapeai /code make sure the positive percentages are green and negative is red

[dev-ape-ai[bot]]

🚀 First Step: Identify Relevant Code

Let's start by identifying the part of the codebase where the percentage changes are displayed in the dashboard. This will likely involve searching for code related to rendering the revenue, subscription, and sales metrics. Stand by while I search for the relevant code snippets...

Relevant Code

I've found the relevant sections in the codebase where the percentage changes for revenue, subscription, and sales are displayed. These are located in app/(dashboard)/dashboard/page.tsx.

View Snippets

```tsx // Revenue

+180.1% from last month

``` ```tsx // Sales

+19% from last month

``` ```tsx // Subscriptions

+20.1% from last month

```

Plan of Action

The plan involves modifying the dashboard/page.tsx file to dynamically change the text color based on the percentage value. If the percentage is positive, the text color will be set to green, and if negative, to red.

File	Changes
app/(dashboard)/dashboard/page.tsx	Modify the className of the percentage text to dynamically change color based on the value.

Coding now...

Please stand by while I code the changes based on the plan of action.

[dev-ape-ai[bot]]

🎉 The changes have been implemented and a pull request has been created! Here's the link to the PR: Feature: Dynamic Color Coding for Percentage Changes

This PR introduces dynamic color changes for percentage values in the dashboard, enhancing visual feedback for users. Positive percentage changes are now displayed in green, while negative ones are in red. 🚀