added logic for updating user profile plus other bug fixes

This commit is contained in:
Kwesi Banson Jnr
2026-03-16 16:41:32 +00:00
parent 9cd017fb9a
commit 72180de8e4
30 changed files with 1346 additions and 49 deletions

View File

@@ -0,0 +1,108 @@
@extends('layouts.master')
@section('page_title')
@if(isset($page_title))
{{ $page_title }}
@endif
@endsection
@section('content')
<div class="">
<div class="page-title">
<div class="title_left" style="width:800px !important;">
<ol class="breadcrumb">
<li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
<li class="active"><a href="{!! url('ss') !!}">dailyquote</a></li>
<li class="active">New Daily Quote</li>
</ol>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
New Daily Quote
@include('commons.notifications')
<div class="clearfix"></div>
</div>
{{-- start of content --}}
<div class="x_content">
<br>
{!! Form::open(['url' => 'dailyquotes', 'id' => 'dailyQuoteCreateForm', 'class' => 'form-horizontal form-label-left']) !!}
<div class="row">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="quoteIDD">dailyquote ID</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('quote') ? 'has-error' : ''}}">
{!! Form::text('quote', old('quote'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Enter quote , 'id' => 'quoteIDD', 'required' => 'true']) !!}
{!! $errors->first('quote', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="directMno">Direct MNO</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('direct_mno') ? 'has-error' : ''}}">
{!! Form::select('direct_mno', $direct_mno_arr ,old('direct_mno'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Select one ' , 'id' => 'directMno', 'required' => 'true']) !!}
{!! $errors->first('direct_mno', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group " id="mnoDiv">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="networkName">MNO Name</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('network') ? 'has-error' : ''}}">
{!! Form::select('mno_name', $network_arr, old('mno_name'), ['class' => 'form-control col-md-7 col-xs-12', 'id' => 'networkName', 'placeholder' => '-- Select --', 'required' => 'true', 'style' => 'width:100%;']) !!}
{!! $errors->first('network', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group " id="supplierDiv">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="supplierName">Supplier Name</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('name') ? 'has-error' : ''}}">
<!-- 'required' => 'true', -->
{!! Form::select('supplier_name', $clients, old('supplier_name'), ['class' => 'form-control', 'id' => 'supplierName', 'placeholder' => '-- Select --', 'style' => 'width:100%;']) !!}
{!! $errors->first('client_id', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">Status</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('status') ? 'has-error' : ''}}">
{!! Form::select('status', $status ,old('status'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Select Status ' , 'id' => 'status', 'required' => 'true']) !!}
{!! $errors->first('status', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="remarks">Remarks</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('remarks') ? 'has-error' : ''}}">
{!! Form::text('remarks', old('remarks'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Enter remarks here' , 'id' => 'remarks']) !!}
{!! $errors->first('remarks', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success btn-block"><i class="fa fa-save"></i> Submit</button>
&nbsp;
<button type="button" class="btn btn-warning btn-block" id="resetBtn"><i class="fa fa-save"></i> Reset</button>
</div>
</div>
{!! Form::close() !!}
</div>
{{-- end of x_content --}}
</div>
{{-- end of x_panel --}}
</div>
</div>
</div>
@endsection
@section('javascript')
<script type="text/javascript" src="{!! url('public/assets/js/dailyquotes.js') !!}"></script>
<script type="text/javascript">
$(function(){
$('select').select2();
});
</script>
@endsection

View File

@@ -0,0 +1,105 @@
@extends('layouts.master')
@section('page_title')
@if(isset($page_title))
{{ $page_title }}
@endif
@endsection
@section('content')
<div class="">
<div class="page-title">
<div class="title_left" style="width:800px !important;">
<ol class="breadcrumb">
<li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
<li class="active"><a href="{!! url('senderids') !!}">Sender IDs</a></li>
<li class="active">Update Sender ID</li>
</ol>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
Update Sender ID
@include('commons.notifications')
<div class="clearfix"></div>
</div>
{{-- start of content --}}
<div class="x_content">
<br>
{!! Form::model($senderid, [
'method' => 'PATCH',
'url' => ['senderids', $senderid],
'class' => 'form-horizontal form-label-left'
]) !!}
<div class="row">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="senderIddEdit">Sender ID</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('senderid') ? 'has-error' : ''}}">
{!! Form::text('senderid', old('senderid'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Enter sender ID' , 'id' => 'senderIddEdit', 'required' => 'true']) !!}
{!! $errors->first('name', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="directMnoEdit">Direct MNO</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('direct_mno') ? 'has-error' : ''}}">
{!! Form::select('direct_mno', $direct_mno_arr ,old('direct_mno'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Select one ' , 'id' => 'directMnoEdit', 'required' => 'true']) !!}
{!! $errors->first('direct_mno', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group <?php //echo ($senderid->direct_mno == 'YES') ? "" : "hidden"; ?>" id="mnoDivEdit">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="networkNameEdit">MNO Name</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('network') ? 'has-error' : ''}}">
{!! Form::select('mno_name', $network_arr, old('mno_name'), ['class' => 'form-control col-md-7 col-xs-12', 'id' => 'networkNameEdit', 'placeholder' => '-- Select --', 'style' => 'width:100%;']) !!}
{!! $errors->first('network', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group <?php //echo ($senderid->direct_mno == 'YES') ? "hidden" : ""; ?>" id="supplierDivEdit">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="supplierNameEdit">Supplier Name</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('name') ? 'has-error' : ''}}">
{!! Form::select('supplier_name', $clients, old('supplier_name'), ['class' => 'form-control', 'id' => 'supplierNameEdit', 'placeholder' => '-- Select --', 'style' => 'width:100%;']) !!}
{!! $errors->first('client_id', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="statusEdit">Status</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('status') ? 'has-error' : ''}}">
{!! Form::select('status', $status ,old('status'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Select Status ' , 'id' => 'statusEdit', 'required' => 'true']) !!}
{!! $errors->first('status', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="remarksEdit">Remarks</label>
<div class="col-md-6 col-sm-6 col-xs-12 {{ $errors->has('remarks') ? 'has-error' : ''}}">
{!! Form::text('remarks', old('remarks'), ['class' => 'form-control col-md-7 col-xs-12', 'placeholder'=>'Enter remarks here' , 'id' => 'remarksEdit']) !!}
{!! $errors->first('remarks', '<p class="help-block">:message</p>') !!}
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="submit" class="btn btn-success btn-block"><i class="fa fa-save"></i> Submit</button>
</div>
</div>
{!! Form::close() !!}
</div>
{{-- end of x_content --}}
</div>
{{-- end of x_panel --}}
</div>
</div>
</div>
@endsection
@section('javascript')
<script type="text/javascript" src="{!! url('public/assets/js/senderid.js') !!}"></script>
<script type="text/javascript">
$(function(){
$('select').select2();
});
</script>
@endsection

View File

@@ -0,0 +1,199 @@
@extends('layouts.master')
@section('page_title')
@if(isset($page_title))
{{ $page_title }}
@endif
@endsection
@section('css')
<link href="{!! url('public/assets/vendors/tabulator/css/bootstrap/tabulator_bootstrap.css') !!}" type="text/css" rel="stylesheet">
@endsection
@section('content')
<div class="">
<div class="page-title">
<div class="title_left">
<div class="title_left">
<ol class="breadcrumb">
<li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
<li class="active">Sender IDs</li>
</ol>
</div>
</div>
<div class="title_right">
<div class="row">
<form method="GET" action="{!! url('senderids') !!}">
<div class="col-md-5 col-sm-5 col-xs-12 form-group">
<div style="margin-top:1px; margin-right:-90px;" class="top_search">
</div>
</div>
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search" style="margin-top: -2px;">
<div class="input-group">
<input type="text" name="keyword" class="form-control" id="keywordField" placeholder="Keyword here...">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary" style="color: #fff;" type="button">Go!</button>
</span>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col-sm-12">
<div class="pull-right"></div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
@include('commons.notifications')
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2> Sender IDs </h2>
<div class="pull-right">
<a class="btn btn-warning btn-sm" href="{!! url('senderids/upload') !!}"><i class="fa fa-cloud-upload"></i> Upload Sender IDs</a>
<a class="btn btn-primary btn-sm" href="{!! url('senderids/create') !!}"><i class="fa fa-plus-circle"></i> New Sender ID</a>
<a class="btn btn-success btn-sm" href="{!! url('senderids/exportall') !!}"><i class="fa fa-plus-circle"></i> Download All</a>
</div>
<div class="clearfix"></div>
</div>
<div class="x_content">
@if(session('current_user.rejected_rows_filename') !== null)
<div class=" well" >
<?php $url = session('current_user.rejected_rows_filename');?>
<a href="{{ url('senderids/uploadreportdownload', $url) }}" class="btn btn-link">View Sender ID Bulk Upload Report</a>
</div>
@endif
<div>
<!-- <button id="senderid-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
<button id="senderid-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button> -->
</div>
<div id="senderIdsTable"></div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('javascript')
<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.min.js') !!}"></script>
<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.plugin.autotable.js') !!}"></script>
<script type="text/javascript">
$(document).ready(function(){
function link(cell, formatterParams){
var url = cell.getValue();
var rowID = cell.getData().id
return "<a href='"+ base_url + "/senderids/"+rowID+"/edit' class='btn btn-link'>"+url+"</a>";
}
function cellDesign (cell, formatterParams){
var value = cell.getValue();
return "<span style='color:#54B4D3; font-weight:bold;'>" + value + "</span>";
}
function statusDesign (cell, formatterParams){
var value = cell.getValue();
// if(value === 'Approved'){
// console.log(value !== null);
if (value !== null) {
if(value.includes('Approved')){
return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
}
else if(value.includes('Active')){
return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
}
else{
return "<span style='color:#E4A11B;'>" + value + "</span>";
}
}
}
var table = new Tabulator("#senderIdsTable", {
ajaxURL: "senderids/all",
paginationSize: 15,
layout: "fitColumns",
pagination: "remote",
selectable: false,
printAsHtml: true,
ajaxLoaderLoading: $('#logo_spinner').html(),
columns: [
{
title: "Sender ID",
field: "senderid",
sorter: "string",
formatter: cellDesign,
formatter:link,
},
{
title: "Direct MNO",
field: "direct_mno",
sorter: "string",
},
{
title: "Network",
field: "mno_name",
sorter: "string",
},
{
title: "Supplier",
field: "supplier_name",
sorter: "string",
},
{
title: "Status",
field: "status",
sorter: "string",
formatter: statusDesign,
},
{
title: "Remarks",
field: "remarks",
sorter: "string",
formatter: statusDesign,
},
{
title: "Created By",
field: "createdBy",
sorter: "string",
},
// {
// title: "Last Modified By",
// field: "modifiedBy",
// sorter: "string",
// }
],
rowClick:function(e, row){
var userID = row.getData().id;
console.log(userID);
//$('#userEditModal').modal('show');
},
});
document.getElementById("senderid-download-xlsx").addEventListener("click", function(){
table.download("xlsx", "senderid-list.xlsx", {sheetName:"Sheet 1"});
});
//trigger download of data.pdf file
document.getElementById("senderid-download-pdf").addEventListener("click", function(){
table.download("pdf", "client-list.pdf", {
orientation:"portrait", //set page orientation to portrait
title:"Click Mobile - Sender ID", //add title to report
});
});
$('#keywordField').on('keyup', function(){
console.log('up');
var keyword = $(this).val();
table.setData("senderids/all?keyword=" + keyword);
});
});
</script>
@endsection

View File

@@ -35,6 +35,7 @@
</head>
<body class="nav-md">
@include('systemusers.partials.profile')
<div class="container-fluid ">
<div class="row">
<nav id="sidebarMenu" class=" col-lg-1 col-md-1 d-md-block sidebar collapse">

View File

@@ -51,12 +51,14 @@
</head>
<body class="nav-md">
@include('systemusers.partials.profile')
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<img src="{{ url('public/assets/img/cml-final-3.png') }}" width="230px" height="70px" style="background-color: #fff;">
<div class="navbar nav_title" style="padding-top: 10px; padding-left: 15px;">
<!-- <img src="{{ url('public/assets/img/cml-logo.png') }}" style="background-color: #fff;"> -->
<img src="{{ url('public/assets/img/cml-final-3_no-bg.png') }}" width="200" style="background-color: #fff;">
<!-- <a href="{{ url('/') }}" class="site_title"><i class="fa fa-paw"></i>
<span>Click ERP</span>
</a> -->
@@ -143,11 +145,105 @@
<script src="{!! url('public/assets/vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js') !!}"></script>
<script src="{!! url('public/assets/js/jquery-confirm.min.js') !!}"></script>
<script>
$(document).ready(function(){
$('.profileLink').click(function(evt){
evt.preventDefault();
$.ajax({
type: "GET",
url: base_url + '/getprofile',
processData: false,
contentType: false,
async: false,
success: function (data){
if (data.code === 1) {
console.log(data);
$('.staffId').val(data.staff_member.id);
$('.staffName').val(data.staff_member.name);
$('.staffEmail').val(data.staff_member.email);
// $('.staffPhone').val(data.staff_member.status).change();
$('.staffPhone').val(data.staff_member.phone);
// $('.staffDesignation').val(data.staff_member.designation);
$('.staffDateAdded').val(data.staff_member.created_at);
$('#profileModal').modal('show');
}
else if (data.code > 1) {
$.alert({
title: 'Alert!',
content: data.msg,
});
}
else {
$.alert({
title: 'Alert!',
content: 'Your request could not be handled. Try again !',
});
}
}
});
});
$('#staffProfileForm').submit(function(evt){
evt.preventDefault(evt);
$('#successArea').addClass('d-none');
$('#errorsArea').removeClass('d-none');
var formData = new FormData($('#staffProfileForm')[0]);
$.ajax({
url: base_url + '/profileupdate',
type: 'POST',
data: formData,
processData: false,
contentType: false,
beforeSend: function() {
$('#successArea').text("");
$('#successArea').text("Please wait ... profile update in progress!");
},
success: function(data) {
if (data['code'] === 1) {
$('#successArea').removeClass('d-none');
$('#errorsArea').addClass('d-none');
$('#successArea').text("");
$('#successArea').text(data['msg']);
// location.reload();
$.alert({
title: 'Alert!',
content: data['msg'],
});
setTimeout(function() {
$('#profileModal').modal('hide');
//location.reload(); // Reloads the current page
}, 2000);
}
else{
$('#successArea').addClass('d-none');
$('#errorArea').removeClass('d-none');
$('#errorArea').text("");
$('#errorArea').text("Account could not be updated!");
$.alert({
title: 'Alert!',
content: 'Account could not updated!',
});
}
},
error: function(xhr, status, error) {
console.error('Error:', error);
$('#successArea').text(error);
$('#successArea').text(error);
$.alert({
title: 'Alert!',
content: error,
});
}
});
});
if ($('.notification-alert').length) {
setTimeout(() => {
$('.notification-alert').slideUp()
}, 2000);
}
});
</script>
@yield('javascript')
@@ -157,4 +253,7 @@
<script src="{!! url('public/assets/build/js/custom.js') !!}"></script>
</body>
</html>
</html>
1. User Service, 2. Payment Service 3. Notification Service 4. Transaction Service 5. Reporting Service.

View File

@@ -51,6 +51,8 @@
<li><a href="{!! url('underconstruction') !!}">Company Types</a></li>
<li><a href="{!! url('underconstruction') !!}">How We Got A Client</a></li>
<li><a href="{!! url('underconstruction') !!}">Countries & Currencies </a></li>
<li><a href="{!! url('dailyquotes') !!}">Daily Quotes </a></li>
<li><a href="{!! url('underconstruction') !!}">National Holidays </a></li>
</ul>
</li>
</ul>

View File

@@ -16,7 +16,8 @@ $staff_member_id = session('current_user.id');
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li><a href="{{ url('staffmembers/profile', $staff_member_id) }}"> Profile</a></li>
<!-- <li><a href="{{ url('staffmembers/profile', $staff_member_id) }}"> Profile</a></li> -->
<li><a class="profileLink">Profile</a></li>
<!-- <li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>

View File

@@ -69,8 +69,8 @@
@endif
<div>
<button id="senderid-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
<button id="senderid-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button>
<!-- <button id="senderid-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
<button id="senderid-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button> -->
</div>
<div id="senderIdsTable"></div>
</div>

View File

@@ -0,0 +1,66 @@
<div class="modal fade" id="profileModal" tabindex="-1" role="dialog" aria-labelledby="profileModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: #f8f8f8; border-bottom: 1px solid #eee;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="profileModalLabel"><i class="glyphicon glyphicon-user"></i> User Profile</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form method="POST" id="staffProfileForm">
<input type="hidden" name="user_id" class="staffId" value="">
{{ csrf_field() }}
<table class="table table-user-information">
<tbody>
<tr>
<td><strong>Full Name:</strong></td>
<td><input type="text" class="form-control staffName" name="name"></td>
</tr>
<tr>
<td><strong>Email:</strong></td>
<td><input type="text" class="form-control staffEmail" name="email"></td>
</tr>
<tr>
<td><strong>Phone:</strong></td>
<td><input type="text" class="form-control staffPhone" name="phone"></td>
</tr>
<!-- <tr>
<td><strong>Designation:</strong></td>
<td><input type="text" class="form-control staffDesignation" name="designation"></td>
</tr> -->
<tr>
<td><strong>Password :</strong></td>
<td>
<input type="password" name="password" class="form-control passwordReset" placeholder="**********">
<p class="text-help text-danger">Enter new password to reset</p>
</td>
</tr>
<tr>
<td><strong>Date Added:</strong></td>
<td><input type="text" readonly class="form-control staffDateAdded"></td>
</tr>
</tbody>
</table>
<button class="btn btn-block btn-primary"><i class="glyphicon glyphicon-floppy-disk"></i> Update</button>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<!-- <div class="pull-left">
<button type="button" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-lock"></i> Reset Password
</button>
</div> -->
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Edit Profile</button> -->
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<!-- Bootstrap CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f9f9f9; /* Light background */
}
.profile-container {
background-color: #ffffff; /* White background */
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
margin: 50px auto;
}
.btn-reset {
background-color: #ff8c00; /* Orange Color */
color: white;
}
.btn-reset:hover {
background-color: #e07b00; /* Darker orange on hover */
}
</style>
</head>
<body>
<div class="container profile-container">
<h2>User Profile</h2>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" value="John Doe" readonly>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" value="johndoe@example.com" readonly>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone" value="+1234567890" readonly>
</div>
<div class="mb-3">
<label for="designation" class="form-label">Designation</label>
<input type="text" class="form-control" id="designation" value="Software Developer" readonly>
</div>
<div class="mb-3">
<label for="date-added" class="form-label">Date Added</label>
<input type="text" class="form-control" id="date-added" value="November 3, 2021" readonly>
</div>
<div class="d-flex justify-content-between">
<button class="btn btn-reset">Reset Password</button>
</div>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
</body>
</html>