I'll create a drag-and-drop Kanban board for church duty assignments that closely matches the design in your image. This will include the sidebar navigation, the duty assignment columns, and draggable cards with all the duty information.

I've recreated the church duty assignment dashboard with a drag-and-drop Kanban board interface that closely matches the design in your image. Here's what I've implemented:

1. Sidebar Navigation - Complete with all menu items from the original design, including the active "Task Assignment" item under "Assignments"
2. Header Section - Includes the "Duty Assignments" title, notification bell, user avatars, and date navigation controls

3. Kanban Board - Four columns representing different statuses:

   • Draft (with 12 items)
   • Notification Sent
   • Confirmed
   • Replacement Requested

4. Duty Cards - Each card contains:

   • Checkbox for selection
   • "Lead Singing" title
   • "Sunday Evening Worship" description
   • Date and time information
   • Requirements (Men • 1 Volunteer)
   • Assignment status with avatar
   • Menu options (three dots)
5. Drag and Drop Functionality - You can drag cards between columns to change their status

The implementation uses:

• React with Next.js App Router
• Tailwind CSS for styling
• @hello-pangea/dnd for drag-and-drop functionality
• shadcn/ui components for UI elements
• Lucide React for icons

The board is fully responsive and maintains the clean, organized look of the original design.

I'll add a modal that appears when clicking on a duty card, displaying all the duty details as shown in your image.

I've added a modal dialog that appears when you click on any duty card. The modal displays all the detailed information about the duty, matching the design in your image:

Features of the Duty Details Modal:

1. Header Section:

   • Title "Duty Details" with a close button
   • Duty name with service type (e.g., "Lead Singing (Wednesday Service)")
   • Delete/trash icon button

2. Date and Time Information:

   • Day and date (e.g., "Wednesday, July 3")
   • Start and end times with an arrow between them (e.g., "09:00 AM → 11:00 AM")

3. Assignment Information:

   • "Currently Assigned to" section
   • User avatar and full name
   • "Assigned" status label

4. Task Description:

   • Detailed description of responsibilities
   • Formatted text explaining the duty requirements

5. Location Information:

   • Address with a map pin icon
   • Full location details

6. Action Buttons:

   • "Change Assigned User" button (outlined style)
   • "Request Confirmation" button (filled blue style)

The modal is fully responsive and appears centered on the screen with a clean, professional design that matches your original interface. The background is dimmed when the modal is open to focus attention on the duty details.