I'll create a beautiful business days calculator that shows the number of elapsed and remaining business days in the current month, along with the percentage. This component will use React hooks for date calculations and the shadcn/ui components for styling.

Here's the React component that creates the business days calculator:

This component creates a beautiful business days calculator with the following features:

1. It calculates the total business days in the current month.
2. It calculates the elapsed business days up to today.
3. It calculates the remaining business days in the month.
4. It shows the percentage of elapsed business days with a progress bar.
5. The layout is created using shadcn/ui components for a polished look.
6. It uses icons from Lucide React to enhance the visual appeal.

The calculator updates automatically based on the current date, providing real-time information about the business days in the current month. The progress bar and percentage display give a quick visual representation of how far along we are in the month's business days.

This component is responsive and will look great on both desktop and mobile devices. The card layout ensures that all the information is neatly organized and easy to read.

I'll update the business days calculator to include boxes showing abbreviations for all the months in the current year along with the count of business days in those months.

Here's the updated React component for the business days calculator:

This updated component now includes the following additional features:

1. It calculates the business days for all months in the current year.
2. It displays boxes for each month showing the month abbreviation and the number of business days.
3. The boxes are responsive and will adjust their layout based on the screen size.

Here's a breakdown of the changes:

1. Added a new state variable yearlyBusinessDays to store the business days data for each month.
2. In the useEffect hook, we calculate the business days for each month of the current year and store it in the yearlyBusinessDays state.
3. At the bottom of the card, we've added a grid layout to display the boxes for each month.
4. Each month is represented by a small Card component showing the month abbreviation and the number of business days.

5. The grid uses responsive classes to adjust the number of columns based on the screen size:

   • 3 columns on small screens
   • 4 columns on medium screens
   • 6 columns on large screens

This updated calculator provides a comprehensive view of business days for the entire year while maintaining the detailed information for the current month. The design is clean, responsive, and consistent with the shadcn/ui styling.