Files
classroomio/apps/dashboard
0482790126 feat(ui): add AttachmentList component for lesson file attachments (#822)
* feat(ui): add AttachmentList component for lesson file attachments

Introduce a reusable AttachmentList molecule with view and edit modes.
View mode shows a header with file count and view/download actions; edit
mode supports drag-to-reorder, view, and delete. Includes Storybook
stories and package exports.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): address AttachmentList PR review feedback

- Sync edit-mode file state using full metadata signature, not IDs only
- Clamp formatFileSize unit index and guard non-finite inputs
- Recognize common MIME types for file-type icon styling
- Scope role=list to row container; use dragHandleZone for reordering
- Add reorder label for drag handle accessibility

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): guard AttachmentList against undefined files prop

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): render AttachmentList stories and guard missing props

Use Storybook template snippets and default args so stories mount
correctly. Default mode and labels in the component for autodocs, and
align dragHandleZone items with rendered rows.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* feat(dashboard): use AttachmentList on lesson documents tab

Replace the horizontal DocumentCard grid with AttachmentList in view and
edit modes, including drag-to-reorder in edit. Tighten the list header to
p-2 with xs text, add document mapping helpers, and translate new labels.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): reset document upload modal state on close

Clear selected file, success message, and upload progress when the add
document modal closes so reopening starts fresh.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(dashboard): raise PDF viewer above sidebar and AI chat

Use z-modal (200) instead of z-100 so the full-screen PDF overlay stacks
above z-app-bar-elevated (150) course sidebar and z-app-bar (100) AI panel.
Add the missing z-modal utility to dashboard app.css to mirror the UI scale.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* chore: minor changes

* feat(dashboard): show spinner and snackbar on document download

AttachmentList download button now shows the Button loading spinner
immediately while the async download runs. On success, a snackbar confirms
the download; on failure, an error snackbar is shown instead of opening
a new tab.

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

* fix(ui): address PR review feedback on AttachmentList

- Reject negative byte counts in formatFileSize instead of using Math.abs
- Make AttachmentList mode/files/labels props optional; disable cross-list drops
- Include file name in drag-handle aria-label for screen readers
- Prevent upload modal from closing while an upload is in progress
- Use ICU plural rules for attachment file_count across all locales

Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Rotimi Best <rotimi-best@users.noreply.github.com>
2026-08-02 21:34:06 +01:00
..
2023-12-20 14:28:40 +03:00
2024-09-19 10:12:54 +01:00
2024-09-19 10:12:54 +01:00
2023-11-25 21:56:02 +00:00
2025-09-10 17:24:35 +01:00
2025-11-01 15:49:29 +01:00
2023-11-25 21:56:02 +00:00

A flexible, user-friendly platform for creating, managing, and delivering trainings for companies and training organisations

ClassroomIO

The Open Source Teaching Platform for Bootcamps
Website | Join Discord community

Codacy Badge

✨ About ClassroomIO

ClassroomIO Courses page

Streamline training for everyone with ClassroomIO.com. Our all-in-one platform empowers bootcamps, educators, and businesses to manage training programs easily. With our platform, anyone can run multiple classes and cohorts all from one UI. The application is mobile-first, which means that students can access your lesson materials from any device.

Mission: Provide Students with the best learning experience

At ClassroomIO, our mission is to provide students with the best possible learning experience. We believe in empowering educators with the tools they need to deliver high-quality education that is accessible, engaging, and effective.

Key Features

  1. 📚 Advanced Course Management: You can create unlimited courses, create lessons, invite students, add assignments, grade their assignments, and even generate certificates.
  2. 👨‍👩‍👦 Multi-Teacher Management: You can invite other teachers into your organization and assign them individual courses.
  3. 🤖 AI Integration: We've got OpenAI integration for quick course creation where you can generate course content, lesson outlines, and even generate assignments right from your lesson notes.
  4. 💬 Forum: Students can ask questions in your dedicated community and get answers from either you or other students.
  5. 🏆 Kahoot-Like Quiz: You can create live quizzes to create more engagement in your classrooms.
  6. 💻 Dedicated Student Dashboard: Once you create an account, you get a dedicated dashboard where your students can access all their courses, assignments, and more.
  7. 🔒 Fully open source: You can self-hostable the whole stack on your servers.

Roadmap Features

  1. Forms: Instead of using Google Forms to collect vital information from your students, you will be able to create forms directly within the dashboard.
  2. Course Announcement: You can make public announcements from the course dashboard to all your students.
  3. Course Templates: You can clone a full course or share templates with other people.
  4. Analytics: You can track data about your students across multiple courses.
  5. Run Courses on Messengers: Students can just join a channel on slack/discord/telegram and a bot automatically sends daily lesson content to your students without you doing anything.

Please reach out to me on twitter if you have any feature request.

Built With

Get a Demo

You can book a quick 15 min demo to see if ClassroomIO is a good fit for you

Book a Call with ClassroomIO.com

Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run Cal.com.

Development

Setup

  1. Clone the repo

    git clone https://github.com/rotimi-best/classroomio.git
    
  2. Go to project folder

    cd classroomio
    
  3. Setup Node If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:

    nvm use
    

    You first might need to install the specific version and then use it:

    nvm install && nvm use
    

    You can install nvm from here.

  4. Set up your .env file

    • Duplicate .env.example to .env
  5. Install the required dependencies

    npm i
    
  6. Run (in development mode)

    npm run dev
    

You can find other repos related to classroomio here: