staff update
This commit is contained in:
Abhishek Mali
187
resources/views/admin/staff/create.blade.php
Normal file
187
resources/views/admin/staff/create.blade.php
Normal file
@@ -0,0 +1,187 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('page-title', 'Account Dashboard')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.card { background:#fff; border:1px solid #eaeaea; padding:1rem; border-radius:6px; }
|
||||
.field { margin-bottom:.8rem; }
|
||||
label { display:block; font-weight:600; margin-bottom:.25rem; }
|
||||
input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea, select {
|
||||
width:100%; padding:.5rem; border:1px solid #ddd; border-radius:4px;
|
||||
}
|
||||
.stages { display:flex; gap:.5rem; margin-bottom:1rem; }
|
||||
.stage-ind { padding:.35rem .6rem; border-radius:4px; background:#f3f3f3; }
|
||||
.stage { display:none; }
|
||||
.stage.active { display:block; }
|
||||
.btn { padding:.5rem .8rem; border-radius:5px; border:1px solid #ccc; background:#f6f6f6; cursor:pointer; }
|
||||
.btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
|
||||
.perm-group { border:1px dashed #eee; padding:.6rem; margin-bottom:.6rem; border-radius:4px; }
|
||||
.perm-list { display:flex; flex-wrap:wrap; gap:.5rem; }
|
||||
.perm-item { min-width:200px; }
|
||||
.error { color:#b00020; font-size:.95rem; margin-top:.25rem; }
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<h3>Add Staff</h3>
|
||||
|
||||
@if($errors->any())
|
||||
<div style="background:#fff0f0; padding:.6rem; border:1px solid #f3c6c6; margin-bottom:1rem;">
|
||||
<strong>There were some problems with your input:</strong>
|
||||
<ul>
|
||||
@foreach($errors->all() as $err)
|
||||
<li>{{ $err }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('admin.staff.store') }}">
|
||||
@csrf
|
||||
|
||||
<div class="stages">
|
||||
<div class="stage-ind">1. Personal</div>
|
||||
<div class="stage-ind">2. Professional</div>
|
||||
<div class="stage-ind">3. System</div>
|
||||
<div class="stage-ind">4. Permissions</div>
|
||||
</div>
|
||||
|
||||
{{-- Stage 1 --}}
|
||||
<div id="stage-1" class="stage active">
|
||||
<div class="field">
|
||||
<label>Name *</label>
|
||||
<input type="text" name="name" value="{{ old('name') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Email *</label>
|
||||
<input type="email" name="email" value="{{ old('email') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Phone *</label>
|
||||
<input type="text" name="phone" value="{{ old('phone') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Emergency Phone</label>
|
||||
<input type="text" name="emergency_phone" value="{{ old('emergency_phone') }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Address</label>
|
||||
<textarea name="address" rows="3">{{ old('address') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:flex-end; gap:.5rem;">
|
||||
<button type="button" class="btn" onclick="showStage(2)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Stage 2 --}}
|
||||
<div id="stage-2" class="stage">
|
||||
<div class="field">
|
||||
<label>Role (Business role)</label>
|
||||
<input type="text" name="role" value="{{ old('role') }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Department</label>
|
||||
<input type="text" name="department" value="{{ old('department') }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Designation</label>
|
||||
<input type="text" name="designation" value="{{ old('designation') }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Joining Date</label>
|
||||
<input type="date" name="joining_date" value="{{ old('joining_date') }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Status</label>
|
||||
<select name="status">
|
||||
<option value="active" {{ old('status')=='active'?'selected':'' }}>Active</option>
|
||||
<option value="inactive" {{ old('status')=='inactive'?'selected':'' }}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Additional Info</label>
|
||||
<textarea name="additional_info" rows="3">{{ old('additional_info') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:space-between; gap:.5rem;">
|
||||
<button type="button" class="btn" onclick="showStage(1)">Back</button>
|
||||
<button type="button" class="btn" onclick="showStage(3)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Stage 3 --}}
|
||||
<div id="stage-3" class="stage">
|
||||
<div class="field">
|
||||
<label>Username *</label>
|
||||
<input type="text" name="username" value="{{ old('username') }}" placeholder="leave blank to use EMPxxxx">
|
||||
<div class="muted" style="font-size:.9rem; margin-top:.25rem;">If left blank employee id will be used.</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Password *</label>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:space-between; gap:.5rem;">
|
||||
<button type="button" class="btn" onclick="showStage(2)">Back</button>
|
||||
<button type="button" class="btn" onclick="showStage(4)">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Stage 4 --}}
|
||||
<div id="stage-4" class="stage">
|
||||
<div style="margin-bottom:.5rem; font-weight:700;">Permissions</div>
|
||||
|
||||
@foreach($permissions as $group => $groupPerms)
|
||||
<div class="perm-group">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<div style="font-weight:600;">{{ ucfirst($group) }}</div>
|
||||
<div>
|
||||
<button type="button" class="btn" onclick="toggleGroup('{{ $group }}')">Toggle group</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="perm-list" id="group-{{ $group }}">
|
||||
@foreach($groupPerms as $perm)
|
||||
<label class="perm-item">
|
||||
<input type="checkbox" name="permissions[]" value="{{ $perm->name }}"> {{ $perm->name }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<div style="display:flex; justify-content:space-between; gap:.5rem;">
|
||||
<button type="button" class="btn" onclick="showStage(3)">Back</button>
|
||||
<button type="submit" class="btn primary">Create Staff</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showStage(n){
|
||||
document.querySelectorAll('.stage').forEach(s=>s.classList.remove('active'));
|
||||
document.getElementById('stage-'+n).classList.add('active');
|
||||
window.scrollTo({top:0, behavior:'smooth'});
|
||||
}
|
||||
|
||||
function toggleGroup(group){
|
||||
const el = document.getElementById('group-'+group);
|
||||
if(!el) return;
|
||||
const inputs = el.querySelectorAll('input[type="checkbox"]');
|
||||
const anyUnchecked = Array.from(inputs).some(i => !i.checked);
|
||||
inputs.forEach(i => i.checked = anyUnchecked);
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
156
resources/views/admin/staff/edit.blade.php
Normal file
156
resources/views/admin/staff/edit.blade.php
Normal file
@@ -0,0 +1,156 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('page-title', 'Account Dashboard')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.card { background:#fff; border:1px solid #eaeaea; padding:1rem; border-radius:6px; }
|
||||
.field { margin-bottom:.8rem; }
|
||||
label { display:block; font-weight:600; margin-bottom:.25rem; }
|
||||
input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea, select {
|
||||
width:100%; padding:.5rem; border:1px solid #ddd; border-radius:4px;
|
||||
}
|
||||
.perm-group { border:1px dashed #eee; padding:.6rem; margin-bottom:.6rem; border-radius:4px; }
|
||||
.perm-list { display:flex; flex-wrap:wrap; gap:.5rem; }
|
||||
.perm-item { min-width:200px; }
|
||||
.btn { padding:.5rem .8rem; border-radius:5px; border:1px solid #ccc; background:#f6f6f6; cursor:pointer; }
|
||||
.btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<h3>Edit Staff — {{ $staff->display_name ?? $staff->name }}</h3>
|
||||
|
||||
@if($errors->any())
|
||||
<div style="background:#fff0f0; padding:.6rem; border:1px solid #f3c6c6; margin-bottom:1rem;">
|
||||
<strong>There were some problems with your input:</strong>
|
||||
<ul>
|
||||
@foreach($errors->all() as $err)
|
||||
<li>{{ $err }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ route('admin.staff.update', $staff->id) }}">
|
||||
@csrf
|
||||
@method('PUT')
|
||||
|
||||
<div class="field">
|
||||
<label>Employee ID</label>
|
||||
<input type="text" value="{{ $staff->employee_id }}" disabled>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Name *</label>
|
||||
<input type="text" name="name" value="{{ old('name', $staff->name) }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Email *</label>
|
||||
<input type="email" name="email" value="{{ old('email', $staff->email) }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Phone *</label>
|
||||
<input type="text" name="phone" value="{{ old('phone', $staff->phone) }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Emergency Phone</label>
|
||||
<input type="text" name="emergency_phone" value="{{ old('emergency_phone', $staff->emergency_phone) }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Address</label>
|
||||
<textarea name="address" rows="3">{{ old('address', $staff->address) }}</textarea>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="field">
|
||||
<label>Role</label>
|
||||
<input type="text" name="role" value="{{ old('role', $staff->role) }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Department</label>
|
||||
<input type="text" name="department" value="{{ old('department', $staff->department) }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Designation</label>
|
||||
<input type="text" name="designation" value="{{ old('designation', $staff->designation) }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Joining Date</label>
|
||||
<input type="date" name="joining_date" value="{{ old('joining_date', optional($staff->joining_date)->format('Y-m-d')) }}">
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Status</label>
|
||||
<select name="status">
|
||||
<option value="active" {{ old('status', $staff->status)=='active'?'selected':'' }}>Active</option>
|
||||
<option value="inactive" {{ old('status', $staff->status)=='inactive'?'selected':'' }}>Inactive</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Additional Info</label>
|
||||
<textarea name="additional_info" rows="3">{{ old('additional_info', $staff->additional_info) }}</textarea>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="field">
|
||||
<label>Username *</label>
|
||||
<input type="text" name="username" value="{{ old('username', $staff->username) }}" required>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>New Password (leave blank to keep existing)</label>
|
||||
<input type="password" name="password" autocomplete="new-password">
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div style="margin-bottom:.5rem; font-weight:700;">Permissions</div>
|
||||
|
||||
@foreach($permissions as $group => $groupPerms)
|
||||
<div class="perm-group">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<div style="font-weight:600;">{{ ucfirst($group) }}</div>
|
||||
<div>
|
||||
<button type="button" class="btn" onclick="toggleGroup('{{ $group }}')">Toggle group</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="perm-list" id="group-{{ $group }}">
|
||||
@foreach($groupPerms as $perm)
|
||||
<label class="perm-item">
|
||||
<input type="checkbox" name="permissions[]" value="{{ $perm->name }}"
|
||||
{{ in_array($perm->name, old('permissions', $staffPermissions)) ? 'checked' : '' }}>
|
||||
{{ $perm->name }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<div style="display:flex; justify-content:flex-end; gap:.5rem;">
|
||||
<a href="{{ route('admin.staff.index') }}" class="btn">Cancel</a>
|
||||
<button type="submit" class="btn primary">Update Staff</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleGroup(group){
|
||||
const el = document.getElementById('group-'+group);
|
||||
if(!el) return;
|
||||
const inputs = el.querySelectorAll('input[type="checkbox"]');
|
||||
const anyUnchecked = Array.from(inputs).some(i => !i.checked);
|
||||
inputs.forEach(i => i.checked = anyUnchecked);
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
65
resources/views/admin/staff/index.blade.php
Normal file
65
resources/views/admin/staff/index.blade.php
Normal file
@@ -0,0 +1,65 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
@section('page-title', 'Account Dashboard')
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
|
||||
.card { background:#fff; border:1px solid #e4e4e4; border-radius:6px; padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.03); }
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
th, td { padding:.6rem .75rem; border-bottom:1px solid #f1f1f1; text-align:left; }
|
||||
.btn { padding:.45rem .75rem; border-radius:4px; border:1px solid #ccc; background:#f7f7f7; cursor:pointer; }
|
||||
.btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
|
||||
.actions a { margin-right:.5rem; color:#0b74de; text-decoration:none; }
|
||||
.muted { color:#666; font-size:.95rem; }
|
||||
</style>
|
||||
|
||||
<div class="top-bar">
|
||||
<h2>Staff</h2>
|
||||
<a href="{{ route('admin.staff.create') }}" class="btn primary">Add Staff</a>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
@if(session('success'))
|
||||
<div style="padding:.5rem; background:#e6ffed; border:1px solid #b6f0c6; margin-bottom:1rem;">{{ session('success') }}</div>
|
||||
@endif
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Employee ID</th>
|
||||
<th>Name</th>
|
||||
<th>Email</th>
|
||||
<th>Phone</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($staff as $s)
|
||||
<tr>
|
||||
<td>{{ $s->id }}</td>
|
||||
<td class="muted">{{ $s->employee_id }}</td>
|
||||
<td>{{ $s->name }}</td>
|
||||
<td>{{ $s->email }}</td>
|
||||
<td>{{ $s->phone }}</td>
|
||||
<td>{{ $s->role ?? '-' }}</td>
|
||||
<td>{{ ucfirst($s->status) }}</td>
|
||||
<td class="actions">
|
||||
<a href="{{ route('admin.staff.edit', $s->id) }}">Edit</a>
|
||||
<form action="{{ route('admin.staff.destroy', $s->id) }}" method="POST" style="display:inline" onsubmit="return confirm('Delete this staff?')">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button class="btn" type="submit">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="8" class="muted">No staff found.</td></tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user