I'll create a modern, clean Schedule Management UI with a dashboard-style layout that includes all the features you've requested. Let's break this down into components and build the interface step by step.

Let's start by creating the main layout and dashboard component:

This implementation creates a modern, clean Schedule Management UI with a dashboard-style layout. Here's a summary of the features and components:

1. Navigation Sidebar: Implemented in the Sidebar component with options for "All Schedules," "Create New Schedule," and "Settings."
2. Table View: The ScheduleTable component displays schedules with all the required columns.
3. Add/Edit/Delete Buttons: Implemented as a dropdown menu in the "Actions" column of the table.
4. Dark Mode Support: Implemented using the ModeToggle component and the ThemeProvider from next-themes.
5. Mobile Responsiveness: The layout is responsive, with the sidebar hiding on smaller screens.

The UI includes the following form inputs:

• Date Picker: For Start Date and End Date
• Time Picker: For Start Time and End Time
• Dropdown: For Mode selection (Online, Offline, Hybrid)
• Numeric Inputs: For Duration, Enrollments, and Stock
• Collapsible Section: Not fully implemented, but can be added for the Pricing section
• Text Input: Can be added for the Coupon Code
• Numeric Input with Slider: Can be added for the Discount percentage

To fully complete the implementation, you would need to:

1. Implement the "Create New Schedule" form
2. Add the Pricing collapsible section with multiple currency inputs
3. Implement the Settings page
4. Add proper state management and API integration for CRUD operations
5. Implement form validation and error handling

This implementation provides a solid foundation for the Schedule Management UI, which can be further customized and extended as needed.

I'll modify the implementation to remove the Mode Toggle and Sidebar, and combine the table view with the form on the same page. I'll also add the missing form fields and make the table responsive.

This implementation creates a modern, clean Schedule Management UI with the following features:

1. A responsive table to view existing schedules
2. A form below the table to add new schedules

3. All the required form fields:

   • Start Date (Date Picker)
   • End Date (Date Picker)
   • Duration (Numeric Input)
   • Start Time (Time Picker)
   • End Time (Time Picker)
   • Mode (Dropdown: Online, Offline, Hybrid)
   • Enrollments (Numeric Input with Default: 0)
   • Stock (Numeric Input with Default: 0)
   • Pricing (Collapsible Section with fields for multiple currencies: USD, CAD, GBP, EUR, AED, INR, AUD, SGD)
   • Coupon Code (Optional Text Input)
   • Discount (%) (Numeric Input with Slider)
4. The ID is auto-generated when a new schedule is added to the list.
5. The layout is responsive and works well on different screen sizes.

To use this implementation:

1. Ensure you have all the necessary dependencies installed, including the shadcn/ui components and their dependencies.
2. Copy the provided code into your project, maintaining the file structure.
3. You may need to create or update the lib/utils.ts file to include the cn function used for conditional classnames.

This implementation provides a solid foundation for the Schedule Management UI. You can further customize and extend it as needed, such as adding form validation, implementing edit and delete functionality for existing schedules, and integrating with a backend API for data persistence.