A modern and responsive Software Inventory Dashboard built with Next.js (App Router), TypeScript, and Tailwind CSS.
It provides an easy way to track internal software assets, manage details, view insights via charts, and handle software lifecycle statuses.
- 📊 Interactive charts powered by amCharts v4 (CDN)
- 🧩 Filter and search software by type, person in charge, license, and status
- 🗂️ Add, edit, and view software details using a modern modal interface
- 🧠 Dynamic data visualization with reusable React components
- 🎨 Built with TailwindCSS for a responsive, clean design
- 🔐 Includes a simple login page (client-side validation only)
- 🖥️ 100% front-end; no backend required
- Framework: Next.js (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Charts: amCharts v4 (via CDN)
- Icons: Font Awesome (CDN)
- Font: Google Font – Inter (
next/font) - State: Client-side state management (React hooks)
software-inventory/
├── src/
│ ├── app/ # Main Next.js application folder (App Router)
│ │ ├── layout.tsx # Root layout wrapper for all pages
│ │ ├── page.tsx # Main page (client-side state management)
│ │ ├── globals.css # Global styles (TailwindCSS + custom overrides)
│ │ │
│ │ ├── components/ # Reusable UI components
│ │ │ ├── Dashboard.tsx # Main dashboard container
│ │ │ ├── HeaderBar.tsx # Top bar (Menu Title + current time)
│ │ │ ├── Inventory.tsx # Inventory section (includes modal + table logic)
│ │ │ ├── InventoryTable.tsx # Table component for displaying software list
│ │ │ ├── Sidebar.tsx # Left navigation sidebar
│ │ │ ├── SoftwareFilterSelect.tsx # Custom select component using react-select
│ │ │ ├── SoftwareModal.tsx # Modal for add/edit/view software details
│ │ │ │
│ │ │ └── charts/ # Data visualization components (amCharts integration)
│ │ │ ├── LanguageChart.tsx # Programming languages chart
│ │ │ ├── PersonChart.tsx # Software per-person chart
│ │ │ ├── PlatformChart.tsx # Platform distribution chart
│ │ │ ├── StatusChart.tsx # Software lifecycle status chart
│ │ │ └── useAmCharts.ts # Custom hook for initializing and managing amCharts
│ │ │
│ │ └── login/ # Login route (separate layout + page)
│ │ ├── layout.tsx # Layout for the login page
│ │ └── page.tsx # Login form page
│ │
│ └── types/ # TypeScript type definitions
│ └── global.d.ts # Global declarations (e.g., window.am5, window.am5themes)
│
├── next.env.d.ts # Type declarations for Next.js environment variables
├── next.config.mjs # Next.js configuration (build, environment, etc.)
│
├── package.json # Project dependencies and scripts
├── package-lock.json # Auto-generated lockfile for consistent installs
│
├── postcss.config.js # PostCSS configuration (used by Tailwind)
├── tailwind.config.ts # TailwindCSS setup and theme customization
├── tsconfig.json # TypeScript configuration and compiler options
│
├── .gitignore # Files and folders to exclude from Git (e.g., node_modules, .next)
├── README.md # Project overview, setup instructions, usage guide
- Clone the repository
git clone https://github.com/your-username/softwarehub.git
cd softwarehubv
```bash
2. **Install dependencies**
npm install
```bash
3. **Run the development server**
npm run dev
4. **Open the app in your browser**
Visit http://localhost:3000Use the following credentials to access the system:
Username: admin
Password: password123
- All CRUD operations, filters, modals, and charts replicate the original system’s functionality.
- amCharts scripts are loaded dynamically via
<Script>inapp/layout.tsx. - Tailwind and original custom CSS are combined in
app/globals.css. - The project runs entirely client-side—no backend setup is required.
© 2025 Kira Saints. All rights reserved.