Skip to content

Commit 8081696

Browse files
author
nejc
committed
feat: Complete admin panel with Tailwind CSS and configurable routes
- Added comprehensive admin dashboard with statistics and quick actions - Implemented Tailwind CSS design system throughout admin panel - Created configurable route system with environment variables - Added RouteHelper class for consistent route name generation - Fixed dashboard quick actions with proper styling and hover effects - Updated all views to use simplified route naming (version-manager.*) - Added Users and Analytics pages with Vue 3 interactivity - Created admin layout with sidebar navigation - Added comprehensive configuration documentation - Implemented responsive design with modern UI components - Added system status indicators and latest versions timeline - Updated all controllers to use new route structure
1 parent 5f82493 commit 8081696

20 files changed

+2330
-237
lines changed

‎CONFIGURATION.md‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# Version Platform Manager Configuration
2+
3+
This document explains how to configure the Version Platform Manager package to suit your needs.
4+
5+
## Route Configuration
6+
7+
The package allows you to customize the route prefixes and naming conventions through environment variables or direct configuration.
8+
9+
### Environment Variables
10+
11+
Add these to your `.env` file:
12+
13+
```env
14+
# Route prefix for admin panel (default: admin/version-manager)
15+
VERSION_ADMIN_ROUTE_PREFIX=admin/version-manager
16+
17+
# Route name prefix (default: version-manager)
18+
VERSION_ADMIN_ROUTE_NAME_PREFIX=version-manager
19+
20+
# Enable/disable admin panel (default: true)
21+
VERSION_ADMIN_ENABLED=true
22+
```
23+
24+
### Configuration File
25+
26+
You can also modify the configuration directly in `config/version-platform-manager.php`:
27+
28+
```php
29+
'admin' => [
30+
'enabled' => env('VERSION_ADMIN_ENABLED', true),
31+
'route_prefix' => env('VERSION_ADMIN_ROUTE_PREFIX', 'admin/version-manager'),
32+
'route_name_prefix' => env('VERSION_ADMIN_ROUTE_NAME_PREFIX', 'version-manager'),
33+
'middleware' => ['web', 'auth'],
34+
],
35+
```
36+
37+
## Route Examples
38+
39+
With default configuration, your routes will be:
40+
41+
- **Dashboard**: `http://your-app.com/admin/version-manager/`
42+
- **Versions**: `http://your-app.com/admin/version-manager/versions`
43+
- **Users**: `http://your-app.com/admin/version-manager/users`
44+
- **Analytics**: `http://your-app.com/admin/version-manager/analytics`
45+
46+
Route names will be:
47+
- `version-manager.dashboard`
48+
- `version-manager.versions.index`
49+
- `version-manager.users.index`
50+
- `version-manager.analytics.index`
51+
52+
## Custom Route Examples
53+
54+
If you want to change the routes to something like `admin/versions`, you can set:
55+
56+
```env
57+
VERSION_ADMIN_ROUTE_PREFIX=admin/versions
58+
VERSION_ADMIN_ROUTE_NAME_PREFIX=versions
59+
```
60+
61+
This would give you:
62+
- **Dashboard**: `http://your-app.com/admin/versions/`
63+
- **Versions**: `http://your-app.com/admin/versions/versions`
64+
- Route names: `versions.dashboard`, `versions.versions.index`, etc.
65+
66+
## Using Route Helper
67+
68+
The package provides a helper class to generate route names consistently:
69+
70+
```php
71+
use LaravelPlus\VersionPlatformManager\Helpers\RouteHelper;
72+
73+
// Get route names
74+
RouteHelper::dashboard(); // returns 'version-manager.dashboard'
75+
RouteHelper::versions('create'); // returns 'version-manager.versions.create'
76+
RouteHelper::users('index'); // returns 'version-manager.users.index'
77+
RouteHelper::analytics('export'); // returns 'version-manager.analytics.export'
78+
```
79+
80+
## Other Configuration Options
81+
82+
### Default User Version
83+
```env
84+
DEFAULT_USER_VERSION=1.0.0
85+
```
86+
87+
### Version Comparison Method
88+
```env
89+
VERSION_COMPARISON=semantic
90+
```
91+
Options: `semantic`, `numeric`, `string`
92+
93+
### Modal Settings
94+
```env
95+
VERSION_MODAL_AUTO_SHOW=true
96+
VERSION_MODAL_DISMISSIBLE=true
97+
VERSION_MODAL_SHOW_ONCE_PER_SESSION=true
98+
VERSION_MODAL_DELAY=1000
99+
```
100+
101+
### Notifications
102+
```env
103+
VERSION_NOTIFICATIONS_ENABLED=true
104+
```
105+
106+
## Publishing Configuration
107+
108+
To publish the configuration file:
109+
110+
```bash
111+
php artisan vendor:publish --tag=version-platform-manager-config
112+
```
113+
114+
This will create `config/version-platform-manager.php` in your application.
115+
116+
## Middleware Configuration
117+
118+
You can customize the middleware applied to admin routes:
119+
120+
```php
121+
'admin' => [
122+
'middleware' => ['web', 'auth', 'admin'], // Add your custom middleware
123+
],
124+
```
125+
126+
## Database Tables
127+
128+
You can customize table names if needed:
129+
130+
```php
131+
'tables' => [
132+
'platform_versions' => 'platform_versions',
133+
'whats_new' => 'whats_new',
134+
'user_versions' => 'user_versions',
135+
],
136+
```
137+
138+
## Feature Types
139+
140+
Customize the feature types for "What's New" content:
141+
142+
```php
143+
'feature_types' => [
144+
'feature' => 'New Feature',
145+
'improvement' => 'Improvement',
146+
'bugfix' => 'Bug Fix',
147+
'security' => 'Security Update',
148+
'deprecation' => 'Deprecation',
149+
],
150+
```

‎TAILWIND_IMPLEMENTATION.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
# Tailwind CSS Implementation
2+
3+
This document outlines the Tailwind CSS implementation for the Version Platform Manager package.
4+
5+
## Overview
6+
7+
The package has been completely converted from Bootstrap/Tabler to Tailwind CSS, providing a modern, responsive design with improved user experience.
8+
9+
## Layouts
10+
11+
### 1. Base Layout (`layouts/app.blade.php`)
12+
- Clean, minimal design with top navigation
13+
- Responsive container with proper spacing
14+
- Footer with copyright information
15+
- Uses Tailwind CSS CDN for immediate styling
16+
17+
### 2. Admin Layout (`layouts/admin.blade.php`)
18+
- Sidebar navigation with fixed positioning
19+
- Top navigation bar with user information
20+
- Responsive design that adapts to different screen sizes
21+
- Active state highlighting for current page
22+
23+
## Components
24+
25+
### 1. Modal Component (`components/modal.blade.php`)
26+
- Reusable modal component with backdrop
27+
- Customizable content and footer sections
28+
- Proper accessibility attributes
29+
- Smooth transitions and animations
30+
31+
### 2. What's New Modal (`components/whats-new.blade.php`)
32+
- Completely redesigned with Tailwind CSS
33+
- Better visual hierarchy with cards and sections
34+
- Improved readability with proper spacing
35+
- Enhanced user experience with better button styling
36+
37+
### 3. Pagination Component (`components/pagination.blade.php`)
38+
- Custom pagination that matches Tailwind design
39+
- Responsive design for mobile and desktop
40+
- Proper accessibility with ARIA labels
41+
- Consistent styling with the rest of the application
42+
43+
## Pages
44+
45+
### 1. Dashboard (`admin/dashboard.blade.php`)
46+
- Overview statistics with colorful cards
47+
- Quick action buttons for common tasks
48+
- Recent activity timeline
49+
- Responsive grid layout
50+
- Vue 3 reactive data binding
51+
52+
### 2. Users Management (`admin/users/index.blade.php`)
53+
- Interactive user table with Vue 3
54+
- Real-time search and filtering
55+
- Sortable columns with visual indicators
56+
- Pagination with dynamic data
57+
- User status management
58+
- Export functionality
59+
60+
### 3. Analytics (`admin/analytics/index.blade.php`)
61+
- Comprehensive analytics dashboard
62+
- Interactive charts and progress bars
63+
- Real-time data visualization
64+
- Period selection for different timeframes
65+
- Export capabilities
66+
- Top users and activity tracking
67+
68+
### 4. Versions Index (`admin/versions/index.blade.php`)
69+
- Clean table design with hover effects
70+
- Statistics cards with icons
71+
- Action buttons with proper styling
72+
- Responsive design for all screen sizes
73+
74+
### 5. Create/Edit Forms (`admin/versions/create.blade.php`, `admin/versions/edit.blade.php`)
75+
- Modern form design with proper spacing
76+
- Error handling with red borders and messages
77+
- Responsive grid layout for form fields
78+
- Consistent button styling
79+
80+
## Features
81+
82+
### 1. Vue 3 Integration
83+
- Interactive components with Vue 3 CDN
84+
- Reactive data binding
85+
- Real-time updates and filtering
86+
- Smooth animations and transitions
87+
- Component-based architecture
88+
89+
### 2. Responsive Design
90+
- Mobile-first approach
91+
- Breakpoints for sm, md, lg, xl screens
92+
- Flexible grid system
93+
- Proper spacing and typography
94+
95+
### 3. Accessibility
96+
- Proper ARIA labels
97+
- Keyboard navigation support
98+
- Focus states for interactive elements
99+
- Screen reader friendly
100+
101+
### 4. Performance
102+
- Tailwind CSS CDN for immediate loading
103+
- Vue 3 CDN for interactivity
104+
- Optimized class usage
105+
- Minimal custom CSS
106+
- Fast rendering
107+
108+
### 5. Customization
109+
- Easy to customize colors and spacing
110+
- Consistent design tokens
111+
- Reusable components
112+
- Maintainable code structure
113+
114+
## Color Scheme
115+
116+
The application uses a consistent color scheme:
117+
118+
- **Primary Blue**: `blue-600` for buttons and links
119+
- **Success Green**: `green-600` for positive actions
120+
- **Warning Yellow**: `yellow-600` for warnings
121+
- **Error Red**: `red-600` for errors and destructive actions
122+
- **Gray Scale**: Various gray shades for text and backgrounds
123+
124+
## Typography
125+
126+
- **Font Family**: Figtree (via Google Fonts)
127+
- **Headings**: Bold weights with proper hierarchy
128+
- **Body Text**: Regular weight with good readability
129+
- **Small Text**: Used for hints and secondary information
130+
131+
## Spacing
132+
133+
Consistent spacing using Tailwind's spacing scale:
134+
- `px-4`, `py-2` for small elements
135+
- `px-6`, `py-3` for medium elements
136+
- `px-8`, `py-4` for large elements
137+
- `gap-6` for grid spacing
138+
139+
## Icons
140+
141+
SVG icons are used throughout the application:
142+
- Heroicons style for consistency
143+
- Proper sizing and colors
144+
- Accessible with proper attributes
145+
146+
## Usage
147+
148+
To use these layouts and components:
149+
150+
1. Extend the appropriate layout:
151+
```php
152+
@extends('version-platform-manager::layouts.admin')
153+
@section('page-title', 'Your Page Title')
154+
```
155+
156+
2. Use the components:
157+
```php
158+
@include('components.modal', ['id' => 'my-modal'])
159+
```
160+
161+
3. The Tailwind CSS is automatically loaded via CDN in the layouts.
162+
163+
## Benefits
164+
165+
1. **Modern Design**: Clean, professional appearance
166+
2. **Better UX**: Improved user experience with better interactions
167+
3. **Responsive**: Works perfectly on all device sizes
168+
4. **Accessible**: Proper accessibility features
169+
5. **Maintainable**: Easy to modify and extend
170+
6. **Performance**: Fast loading and rendering
171+
7. **Consistent**: Unified design language throughout
172+
173+
## Future Enhancements
174+
175+
- Dark mode support
176+
- More interactive components
177+
- Advanced animations
178+
- Custom theme configuration
179+
- Component library documentation

‎config/version-platform-manager.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,8 @@
4646
*/
4747
'admin' => [
4848
'enabled' => env('VERSION_ADMIN_ENABLED', true),
49-
'route_prefix' => env('VERSION_ADMIN_ROUTE_PREFIX', 'admin/versions'),
49+
'route_prefix' => env('VERSION_ADMIN_ROUTE_PREFIX', 'admin/version-manager'),
50+
'route_name_prefix' => env('VERSION_ADMIN_ROUTE_NAME_PREFIX', 'version-manager'),
5051
'middleware' => ['web', 'auth'],
5152
],
5253

0 commit comments

Comments
 (0)