This is a React-based implementation of the UI design provided by Organia Innovations Labs for their internship assessment. The application features a responsive dashboard interface with form management, interactive map integration, and pixel-perfect UI implementation.

• React 18.2.0 - Frontend framework
• TypeScript 4.9.5 - Type-safe development
• Tailwind CSS 3.4.1 - Utility-first CSS framework
• React Leaflet 4.2.1 - Interactive map component
• Leaflet 1.9.4 - Map library

• React Scripts 5.0.1 - Build configuration
• PostCSS 8.4.33 - CSS processing
• Autoprefixer 10.4.17 - CSS vendor prefixing

• Left sidebar navigation with Home and Menu2-Menu7 items
• Collapsible sidebar functionality
• Top navigation bar with user profile and notifications
• Breadcrumb navigation (Main > Sub)
• Tab navigation (T01-T06) with active state
• Multi-section form layout

• Two side-by-side detail cards (Details 1 & Details 2)
• Name input fields (First Name, Last Name)
• Contact fields (Contact Person, Contact Number with country code)
• Interactive map component
• Auto-populated latitude and longitude
• Province dropdown selector
• District and City inputs
• Street/Lane and Address Note fields
• Required field indicators (*)

• Interactive Leaflet map
• Click-to-pin location selection
• Real-time latitude/longitude display
• Automatic coordinate population
• Map marker visualization

• Name and Type fields
• Total Value and Description
• Quantity and Number inputs
• Weight (KG) field
• Dimensions: Height, Length, Width (in meters)
• Proper field grouping and layout

• React state management for all forms
• Real-time form input handling
• Map click event handling
• Coordinate auto-population
• Tab switching functionality
• Required field validation (UI indicators)

• Desktop layout (1920px+)
• Tablet layout (768px+)
• Collapsible sidebar for smaller screens
• Responsive grid layouts

organia-ui-task/
├── public/
│ └── index.html # HTML template
├── src/
│ ├── assets/ # Static assets (currently empty)
│ ├── components/ # Reusable React components
│ │ ├── Sidebar.tsx # Left sidebar navigation
│ │ ├── TopNavigation.tsx # Header with user profile
│ │ ├── TabNavigation.tsx # Tab controls
│ │ ├── Detailscard.tsx # Main details form card
│ │ ├── MapComponent.tsx # Interactive map
│ │ └── SubDetails.tsx # Product details form
│ ├── layout/ # Layout components
│ │ └── MainLayout.tsx # Main application layout
│ ├── App.tsx # Root component
│ ├── Main.tsx # Application entry point
│ └── index.css # Global styles + Tailwind
├── tailwind.config.js # Tailwind configuration
├── tsconfig.json # TypeScript configuration
├── postcss.config.js # PostCSS configuration
├── package.json # Dependencies and scripts
└── README.md # This file

• Node.js 16.x or higher
• npm 8.x or higher

1. Clone the repository

   https://github.com/Sithruby/organia-ui-task-Sithruby.git
   cd organia-ui-task

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3000

npm run build

The optimized production build will be in the build/ directory.

1. Click anywhere on the map to select a location
2. The latitude and longitude fields will automatically populate
3. The marker will update to show the selected position

• All input fields support real-time data entry
• Required fields are marked with a red asterisk (*)
• Country code selector for phone numbers
• Province dropdown with predefined options
• Type selector in Sub Details section

• Use sidebar icons to navigate between sections
• Click tab buttons (T01-T06) to switch between tabs
• Active states show current selection

Desktop

Tablet

mobile

The application uses a professional color palette:

• Navy Blue - #1a2332 (Primary background)
• Dark Navy - #0f1419 (Sidebar, headers)
• Burgundy - #7d1f3e (Action buttons)
• Gray Scale - Various shades for borders and backgrounds
• Blue Accent - #3b82f6 (Focus states)

• ✅ All core features implemented
• ✅ Map integration fully functional
• ✅ Responsive design complete
• ✅ Form validation (UI indicators)

• TypeScript strict mode enabled
• Consistent component structure
• Reusable component patterns
• Clean code principles followed
• Proper prop typing

#1, project initialized with React and Tailwind CSS
#2 sidebar and top navigation implemented
#3 Top navigation Updated and Tabnaviagtion implemented
#3, main details form completed with map integration
#Subdetail section added
#5, final UI polish and README documentation

This is an internship assessment project.

This project is created as part of an internship assessment for Organia Innovations Labs.

• Design provided by Organia Innovations Labs
• Map tiles by OpenStreetMap contributors
• Icons from Tailwind CSS

Built with ❤️ for Organia Innovations Labs Internship Assessment

Last Updated: February 2026