implement next.js v15 project with taiwind and https://ui.shadcn.comNextjs 15: React framework.React 19: UI library.Middleware (nextjs): To run code before rendering (e.g., authentication, API requests).Turborepo: For scaling monorepos.Tailwind CSS 4: Utility-first CSS framework for custom designs.Shadcn: UI component library for building consistent design systems.Story Book: For the components documentation.TanStack Query 5: Data-fetching and state management library.React Hook Form: Form management library for handling form state and validation.Zod: Validation library.Zustand: Managing state.Recharts: Integrate charts into your React application.Vitest + React Testing Library: Unit & integration testing.
I'll help you create a comprehensive Next.js 15 project with all the modern tools and libraries you've specified. This will be a full-stack setup with proper configuration and examples.
I've created a comprehensive Next.js 15 project that showcases all the modern tools and libraries you requested. Here's what's included:
The project demonstrates real-world patterns with:
equipment feature requirementsImlement quipment design according main requirementsImplement the UI/UX for the Equipment module. This module will support full lifecycle management of portable and field-deployed equipment, with tracking for ownership, maintenance, check-in/out history, usage (meter-based), and status.Unlike stationary factory equipment, this module focuses on equipment that is frequently used in the field or assigned to technicians, stored in service vans, or temporarily kept at a facility.📁 Screens Required1. Equipment Listing ViewTable or card-based layoutFilters: Category, Status, Assigned ToSearch barActions: Add, Edit, View, ArchiveBulk select and actions (Archive, Reassign)2. Add/Edit Equipment FormThe layout is similar to a vehicle form, but has some distinct differences to avoid confusion.Basic InfoEquipment NameCategory (predefined + custom)Managed via Equipment Categories tab (similar to Vehicle Groups)MakeModelSerial NumberDescription/NotesTags (optional)PhotosQR CodeSimilar to a Part, users will be able to generate a QR code that can be attached to a piece of equipment for easy check-in/out, service requests, etc.Procurement & WarrantyVendor / SupplierPurchase DatePurchase PriceWarranty Expiration DateReceipt and Warranty Documents (attachments)Usage TrackingMeter Type: Distance, Time, CountUnit of MeasureOptions for MVP:MilesKilometersHoursMinutesCyclesStartsJobsStarting Meter Value (number input)Custom FieldsUser-defined custom fields (similar to Vehicles)🗂 Equipment View ScreenDisplays a detailed summary of all the above in a clean, sectioned layout similar to Vehicles. Should include:Equipment timeline (activity log: check-outs, services, meter updates)Visual tag for current assignment (e.g. “Assigned to: Juan Ramirez – Van #12”)Quick actions (Check In, Update Meter, etc)The below should be organized similarly to the Vehicle > View screen, with a header with sections, and tabs:SummarySimilar to VehicleActivitySimilar to Vehicles, a CRM-style widgetOwnership & Assignment (similar layout and functionality to Vehicle assignment)Assigned To: User, Vehicle, or Facility (with dropdown or searchable picker)Equipment can only be assigned to one entity at a time (i.e., it is either assigned to Technician John Smith or is stored in a warehouse, but not both)Assignment Type: Permanent / TemporaryAssigned DateAssignment History (show icon that will open a modal)Check In/Check Out (this could be a tab or could be incorporated into the header section so that it’s easy for users to see who is in possession of the of equipment)Current Status: In Use / AvailableLast Checked Out ByCheck In/Out History (similar to InspectionsSimilar to VehiclesMaintenanceSimilar to VehiclesService HistorySimilar to VehiclesDocumentsPhotos, manuals, warranty docsDrag & drop or file pickerConceptual Difference between Ownership & Assignment and Check-in/OutFeaturePurposeExample Use CaseOwnership & AssignmentDefines who is responsible for or primarily uses the equipment (long-term or ongoing)Technician A is responsible for Generator X during their employmentCheck-In / Check-OutTracks temporary possession or transfer of equipment for a specific period or jobTechnician B checks out Generator X for Job 123 for 3 days🔄 Check In/Check Out FlowInline modal or drawer view to:Select employee or vehicleAdd notesTimestamp auto-filled but allow users to editRecord captured in timeline🔧 Other Functional NotesStatus values: Active, In Repair, Out of Service, RetiredMeter values must be validated (no backward entries)All Equipment should be unique (cannot duplicate serial #)📐 Design GuidelinesMatch styling and patterns from Vehicle Management moduleConsistent iconography with other Asset Ops viewsColor indicators for assignment and status (e.g. red = Out of Service)Optimize for bulk management scenarios (multi-select)design
I'll implement a comprehensive Equipment Management module based on your detailed requirements and the provided design mockup. This will include the listing view, forms, detailed equipment view, and check-in/out functionality.