MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

settings page

Browse Source
This commit is contained in:
CHIEFSOFT\ameye
2025-07-05 12:02:13 -04:00
parent 6136d762a3
commit ee787c0740
3 changed files with 229 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/logo-light-0.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

src/component/settings/Settings.jsx
+63 -138
View File
@@ -15,7 +15,7 @@ export default function Settings(){
<div className="row account-contant"> <div className="row account-contant">
<div className="col-12"> <div className="col-12">
<div className="card card-statistics"> <div className="card card-statistics">
<div className="card-body p-0"> <div className="card-body p-0" style={{backgroundColor:"#f9f9fb"}}>
<div className="row no-gutters"> <div className="row no-gutters">
<div className="col-xl-3 pb-xl-0 pb-5 border-right"> <div className="col-xl-3 pb-xl-0 pb-5 border-right">
<div className="page-account-profil pt-5"> <div className="page-account-profil pt-5">
@@ -62,9 +62,9 @@ export default function Settings(){
<button className="btn btn-light text-primary mb-2">Upload New Avatar <button className="btn btn-light text-primary mb-2">Upload New Avatar
</button> </button>
</div> </div>
<div> {/*<div>*/}
<button className="btn btn-danger">Delete</button> {/* <button className="btn btn-danger">Delete</button>*/}
</div> {/*</div>*/}
</div> </div>
</div> </div>
</div> </div>
@@ -77,15 +77,25 @@ export default function Settings(){
<form> <form>
<div className="form-row"> <div className="form-row">
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="name1">Full Name</label> <label htmlFor="name1">First Name</label>
<input type="text" className="form-control" id="name1" <input type="text" className="form-control" id="name1"
value="Alice Williams" /> value="Alice" />
</div> </div>
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="title1">Title</label> <label htmlFor="name1">Last Name</label>
<input type="text" className="form-control" id="title1" <input type="text" className="form-control" id="name1"
value="Marketing expert" /> value="Williams" />
</div> </div>
<div className="form-group col-md-12">
<label htmlFor="name1">Account Name</label>
<input type="text" className="form-control" id="name1"
value="This is the best hospital name" />
</div>
{/*<div className="form-group col-md-12">*/}
{/* <label htmlFor="title1">Email</label>*/}
{/* <input type="text" className="form-control" id="title1"*/}
{/* value="email@email.com" />*/}
{/*</div>*/}
<div className="form-group col-md-12"> <div className="form-group col-md-12">
<label htmlFor="phone1">Phone Number</label> <label htmlFor="phone1">Phone Number</label>
<input type="text" className="form-control" id="phone1" <input type="text" className="form-control" id="phone1"
@@ -108,135 +118,47 @@ export default function Settings(){
value="1234 North Avenue Luke Lane, South Bend, IN 360001" /> value="1234 North Avenue Luke Lane, South Bend, IN 360001" />
</div> </div>
<div className="form-row"> {/*<div className="form-row">*/}
<div className="col-12"> {/* <div className="form-group col-md-4">*/}
<label className="mb-1">Birthday</label> {/* <label htmlFor="inputState3">City</label>*/}
</div> {/* <select id="inputState3" className="form-control">*/}
<div className="form-group col-md-4"> {/* <option>Choose...</option>*/}
<select id="inputState" className="form-control"> {/* <option selected="">London</option>*/}
<option>Date</option> {/* <option>Montreal</option>*/}
<option>01</option> {/* <option>Delhi</option>*/}
<option>02</option> {/* <option>Tokyo</option>*/}
<option>03</option> {/* </select>*/}
<option>04</option> {/* </div>*/}
<option>05</option> {/* <div className="form-group col-md-4">*/}
<option>06</option> {/* <label htmlFor="inputState4">State</label>*/}
<option>07</option> {/* <select id="inputState4" className="form-control">*/}
<option>08</option> {/* <option>Choose...</option>*/}
<option>09</option> {/* <option selected="">England</option>*/}
<option>10</option> {/* <option>California</option>*/}
<option selected="">11</option> {/* <option>Texas</option>*/}
<option>12</option> {/* <option>Scotland</option>*/}
<option>13</option> {/* </select>*/}
<option>14</option> {/* </div>*/}
<option>15</option> {/* <div className="form-group col-md-4">*/}
<option>16</option> {/* <label htmlFor="inputZip">Zip</label>*/}
<option>17</option> {/* <input type="text" className="form-control" id="inputZip"*/}
<option>18</option> {/* value="EC1A 1BB" />*/}
<option>19</option> {/* </div>*/}
<option>20</option> {/*</div>*/}
<option>21</option> {/*<div className="form-group">*/}
<option>22</option> {/* <div className="form-check">*/}
<option>23</option> {/* <input className="form-check-input" type="checkbox"*/}
<option>24</option> {/* id="gridCheck" />*/}
<option>25</option> {/* <label className="form-check-label" htmlFor="gridCheck">*/}
<option>26</option> {/* I agree to receive email notification.*/}
<option>27</option> {/* </label>*/}
<option>28</option> {/* </div>*/}
<option>29</option> {/*</div>*/}
<option>30</option> <div style={{textAlign:"right"}}>
<option>31</option> <button type="submit" className="btn btn-primary">Update Profile
</select> </button>
</div> </div>
<div className="form-group col-md-4">
<select id="inputState1" className="form-control">
<option>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option selected="">May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
<div className="form-group col-md-4">
<select id="inputState2" className="form-control">
<option>Year</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option selected="">1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
</select>
</div>
</div>
<div className="form-row">
<div className="form-group col-md-4">
<label htmlFor="inputState3">City</label>
<select id="inputState3" className="form-control">
<option>Choose...</option>
<option selected="">London</option>
<option>Montreal</option>
<option>Delhi</option>
<option>Tokyo</option>
</select>
</div>
<div className="form-group col-md-4">
<label htmlFor="inputState4">State</label>
<select id="inputState4" className="form-control">
<option>Choose...</option>
<option selected="">England</option>
<option>California</option>
<option>Texas</option>
<option>Scotland</option>
</select>
</div>
<div className="form-group col-md-4">
<label htmlFor="inputZip">Zip</label>
<input type="text" className="form-control" id="inputZip"
value="EC1A 1BB" />
</div>
</div>
<div className="form-group">
<div className="form-check">
<input className="form-check-input" type="checkbox"
id="gridCheck" />
<label className="form-check-label" htmlFor="gridCheck">
I agree to receive email notification.
</label>
</div>
</div>
<button type="submit" className="btn btn-primary">Update Information
</button>
</form> </form>
</div> </div>
</div> </div>
@@ -282,7 +204,10 @@ export default function Settings(){
<input type="text" className="form-control" id="we" <input type="text" className="form-control" id="we"
value="https://yourwebsite.com" /> value="https://yourwebsite.com" />
</div> </div>
<button type="submit" className="btn btn-primary">Save & Update</button> <div style={{textAlign:"right"}}>
<button type="submit" className="btn btn-primary">Update Links</button>
</div>
</form> </form>
</div> </div>
</div> </div>
src/component/users/Users.jsx
+166 -166
View File
@@ -53,172 +53,172 @@ export default function Users(){
</div> </div>
</div> </div>
</div> </div>
<div className="col-xxl-3 col-xl-4 col-sm-6"> {/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
<div className="card card-statistics contact-contant"> {/* <div className="card card-statistics contact-contant">*/}
<div className="card-body py-4"> {/* <div className="card-body py-4">*/}
<div className="d-flex align-items-center"> {/* <div className="d-flex align-items-center">*/}
<div className="bg-img"> {/* <div className="bg-img">*/}
<img src="assets/img/avtar/02.jpg" alt="" className="img-fluid" /> {/* <img src="assets/img/avtar/02.jpg" alt="" className="img-fluid" />*/}
</div> {/* </div>*/}
<div className="ml-3"> {/* <div className="ml-3">*/}
<h4 className="mb-0">Samuel Woods</h4> {/* <h4 className="mb-0">Samuel Woods</h4>*/}
<p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p> {/* <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
<div> {/* <div>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"> {/* <div className="img-icon">*/}
<div className="img-icon"><i className="fa fa-mobile"></i></div> {/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
</div> {/* </div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>026-123-8546</p> {/* <p>026-123-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-phone"></i></div> {/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>80-1230-8546</p> {/* <p>80-1230-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-envelope-o"></i></div> {/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>Samuel.Woods@gmail.com</p> {/* <p>Samuel.Woods@gmail.com</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/*</div>*/}
<div className="col-xxl-3 col-xl-4 col-sm-6"> {/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
<div className="card card-statistics contact-contant"> {/* <div className="card card-statistics contact-contant">*/}
<div className="card-body py-4"> {/* <div className="card-body py-4">*/}
<div className="d-flex align-items-center"> {/* <div className="d-flex align-items-center">*/}
<div className="bg-img"> {/* <div className="bg-img">*/}
<img src="assets/img/avtar/03.jpg" alt="" className="img-fluid" /> {/* <img src="assets/img/avtar/03.jpg" alt="" className="img-fluid" />*/}
</div> {/* </div>*/}
<div className="ml-3"> {/* <div className="ml-3">*/}
<h4 className="mb-0">Garettdon</h4> {/* <h4 className="mb-0">Garettdon</h4>*/}
<p><span className="badge badge-primary-inverse px-2 py-1 mt-1">Office</span></p> {/* <p><span className="badge badge-primary-inverse px-2 py-1 mt-1">Office</span></p>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
<div> {/* <div>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-mobile"></i></div> {/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>026-123-8546</p> {/* <p>026-123-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-phone"></i></div> {/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>80-1230-8546</p> {/* <p>80-1230-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-envelope-o"></i></div> {/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>Garettdon@gmail.com</p> {/* <p>Garettdon@gmail.com</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/*</div>*/}
<div className="col-xxl-3 col-xl-4 col-sm-6"> {/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
<div className="card card-statistics contact-contant"> {/* <div className="card card-statistics contact-contant">*/}
<div className="card-body py-4"> {/* <div className="card-body py-4">*/}
<div className="d-flex align-items-center"> {/* <div className="d-flex align-items-center">*/}
<div className="bg-img"> {/* <div className="bg-img">*/}
<img src="assets/img/avtar/04.jpg" alt="" className="img-fluid" /> {/* <img src="assets/img/avtar/04.jpg" alt="" className="img-fluid" />*/}
</div> {/* </div>*/}
<div className="ml-3"> {/* <div className="ml-3">*/}
<h4 className="mb-0">Garynice</h4> {/* <h4 className="mb-0">Garynice</h4>*/}
<p><span className="badge badge-warning-inverse px-2 py-1 mt-1">Home</span></p> {/* <p><span className="badge badge-warning-inverse px-2 py-1 mt-1">Home</span></p>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
<div> {/* <div>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-mobile"></i></div> {/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>026-123-8546</p> {/* <p>026-123-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-phone"></i></div> {/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>80-1230-8546</p> {/* <p>80-1230-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-envelope-o"></i></div> {/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>Garynice@gmail.com</p> {/* <p>Garynice@gmail.com</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/*</div>*/}
<div className="col-xxl-3 col-xl-4 col-sm-6"> {/*<div className="col-xxl-3 col-xl-4 col-sm-6">*/}
<div className="card card-statistics contact-contant"> {/* <div className="card card-statistics contact-contant">*/}
<div className="card-body py-4"> {/* <div className="card-body py-4">*/}
<div className="d-flex align-items-center"> {/* <div className="d-flex align-items-center">*/}
<div className="bg-img"> {/* <div className="bg-img">*/}
<img src="assets/img/avtar/05.jpg" alt="" className="img-fluid" /> {/* <img src="assets/img/avtar/05.jpg" alt="" className="img-fluid" />*/}
</div> {/* </div>*/}
<div className="ml-3"> {/* <div className="ml-3">*/}
<h4 className="mb-0">Andrew nico</h4> {/* <h4 className="mb-0">Andrew nico</h4>*/}
<p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p> {/* <p><span className="badge badge-success-inverse px-2 py-1 mt-1">Friends</span></p>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
<div> {/* <div>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-mobile"></i></div> {/* <div className="img-icon"><i className="fa fa-mobile"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>026-123-8546</p> {/* <p>026-123-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-phone"></i></div> {/* <div className="img-icon"><i className="fa fa-phone"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>80-1230-8546</p> {/* <p>80-1230-8546</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
<ul className="nav"> {/* <ul className="nav">*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<div className="img-icon"><i className="fa fa-envelope-o"></i></div> {/* <div className="img-icon"><i className="fa fa-envelope-o"></i></div>*/}
</li> {/* </li>*/}
<li className="nav-item"> {/* <li className="nav-item">*/}
<p>Andrew.nico@gmail.com</p> {/* <p>Andrew.nico@gmail.com</p>*/}
</li> {/* </li>*/}
</ul> {/* </ul>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/*</div>*/}
<div className="col-xxl-3 col-xl-4 col-sm-6"> <div className="col-xxl-3 col-xl-4 col-sm-6">
<div className="card card-statistics contact-contant"> <div className="card card-statistics contact-contant">
<div className="card-body py-4"> <div className="card-body py-4">