-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'dev' into Login-Redesign
- Loading branch information
Showing
48 changed files
with
3,439 additions
and
71 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import React, { useState } from 'react'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
|
|
||
| const AddUser: React.FC = () => { | ||
| const [name, setName] = useState(''); | ||
| const [email, setEmail] = useState(''); | ||
| const [status, setStatus] = useState('Active'); | ||
| const [location, setLocation] = useState(''); | ||
| const [phone, setPhone] = useState(''); | ||
| const [group, setGroup] = useState(''); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const handleSubmit = (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| // Handle the form submission logic here | ||
| navigate('/branch-manager/users'); // Navigate back to the main page after submission | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="min-h-screen bg-transparent text-white p-8"> | ||
| <h2 className="text-2xl mb-4">Add User</h2> | ||
| <form onSubmit={handleSubmit}> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Name</label> | ||
| <input | ||
| type="text" | ||
| value={name} | ||
| onChange={(e) => setName(e.target.value)} | ||
| className="w-2/3 p-2 border border-gray-500 rounded text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Email</label> | ||
| <input | ||
| type="email" | ||
| value={email} | ||
| onChange={(e) => setEmail(e.target.value)} | ||
| className="w-2/3 p-2 border border-gray-500 rounded text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Status</label> | ||
| <select | ||
| value={status} | ||
| onChange={(e) => setStatus(e.target.value)} | ||
| className="w-2/3 p-2 border border-gray-500 rounded text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| > | ||
| <option value="Active">Active</option> | ||
| <option value="Inactive">Inactive</option> | ||
| </select> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Location</label> | ||
| <input | ||
| type="text" | ||
| value={location} | ||
| onChange={(e) => setLocation(e.target.value)} | ||
| className="w-2/3 p-2 border border-gray-500 rounded text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Phone</label> | ||
| <input | ||
| type="text" | ||
| value={phone} | ||
| onChange={(e) => setPhone(e.target.value)} | ||
| className="w-2/3 p-2 border border-gray-500 rounded text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Group</label> | ||
| <input | ||
| type="text" | ||
| value={group} | ||
| onChange={(e) => setGroup(e.target.value)} | ||
| className="w-2/3 p-2 border border-gray-500 rounded text-black focus:outline-none focus:ring-2 focus:ring-yellow-500 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="flex justify-end"> | ||
| <button | ||
| type="button" | ||
| onClick={() => navigate('/branch-manager/users')} | ||
| className="bg-gray-600 hover:bg-transparent border text-white px-4 py-2 rounded mr-2 transition duration-300" | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button type="submit" className="bg-yellow-500 hover:bg-yellow-700 text-white px-4 py-2 rounded transition duration-300"> | ||
| Save | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddUser; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { useParams, useNavigate } from 'react-router-dom'; | ||
|
|
||
| interface User { | ||
| id: number; | ||
| name: string; | ||
| email: string; | ||
| status: string; | ||
| location: string; | ||
| phone: string; | ||
| group: string; | ||
| } | ||
|
|
||
| const EditUser: React.FC = () => { | ||
| const { id } = useParams<{ id: string }>(); | ||
| const navigate = useNavigate(); | ||
| const [user, setUser] = useState<User | null>(null); | ||
|
|
||
| useEffect(() => { | ||
| // Fetch user data by id and setUser | ||
| // Example: | ||
| setUser({ id: Number(id), name: 'Tom Cooper', email: '[email protected]', status: 'Active', location: 'United States', phone: '+65 9308 4744', group: 'Design' }); | ||
| }, [id]); | ||
|
|
||
| const handleSubmit = (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| // Handle the form submission logic here | ||
| navigate('/branch-manager/users'); // Navigate back to home after submission | ||
| }; | ||
|
|
||
| if (!user) { | ||
| return <div className="text-black">Loading...</div>; | ||
| } | ||
|
|
||
| return ( | ||
| <div className="min-h-screen bg-transparent text-white p-8"> | ||
| <h2 className="text-2xl mb-4">Edit User</h2> | ||
| <form onSubmit={handleSubmit}> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Name</label> | ||
| <input | ||
| type="text" | ||
| value={user.name} | ||
| onChange={(e) => setUser({ ...user, name: e.target.value })} | ||
| className="w-2/3 p-2 border border-gray-500 rounded bg-gray-800 text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Email</label> | ||
| <input | ||
| type="email" | ||
| value={user.email} | ||
| onChange={(e) => setUser({ ...user, email: e.target.value })} | ||
| className="w-2/3 p-2 border border-gray-500 rounded bg-gray-800 text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Status</label> | ||
| <select | ||
| value={user.status} | ||
| onChange={(e) => setUser({ ...user, status: e.target.value })} | ||
| className="w-2/3 p-2 border border-gray-500 rounded bg-gray-800 text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| > | ||
| <option value="Active">Active</option> | ||
| <option value="Inactive">Inactive</option> | ||
| </select> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Location</label> | ||
| <input | ||
| type="text" | ||
| value={user.location} | ||
| onChange={(e) => setUser({ ...user, location: e.target.value })} | ||
| className="w-2/3 p-2 border border-gray-500 rounded bg-gray-800 text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Phone</label> | ||
| <input | ||
| type="text" | ||
| value={user.phone} | ||
| onChange={(e) => setUser({ ...user, phone: e.target.value })} | ||
| className="w-2/3 p-2 border border-gray-500 rounded bg-gray-800 text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <label className="block mb-2">Group</label> | ||
| <input | ||
| type="text" | ||
| value={user.group} | ||
| onChange={(e) => setUser({ ...user, group: e.target.value })} | ||
| className="w-2/3 p-2 border border-gray-500 rounded bg-gray-800 text-black focus:outline-none focus:ring-2 focus:ring-orange-600 transition duration-300" | ||
| required | ||
| /> | ||
| </div> | ||
| <div className="flex justify-end"> | ||
| <button | ||
| type="button" | ||
| onClick={() => navigate('/branch-manager/users')} | ||
| className="bg-transparent hover:bg-yellow-500 text-white px-4 py-2 border rounded mr-2 transition duration-300" | ||
| > | ||
| Cancel | ||
| </button> | ||
| <button type="submit" className="bg-yellow-500 hover:bg-yellow-700 text-black px-4 py-2 rounded transition duration-300"> | ||
| Save | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default EditUser; |
Oops, something went wrong.