Skip to content
Snippets Groups Projects
Commit 5c46580e authored by Muhhamad  Syauqi's avatar Muhhamad Syauqi
Browse files

feat: component user logout button

parent 5b4144bf
Branches
Tags
1 merge request!51Feat/#13 pdf invoice
......@@ -8,6 +8,7 @@
"name": "sm-fe",
"version": "0.1.0",
"dependencies": {
"@types/jwt-decode": "^3.1.0",
"axios": "^1.6.7",
"classnames": "^2.5.1",
"cypress": "^13.8.0",
......@@ -1278,6 +1279,15 @@
"@types/node": "*"
}
},
"node_modules/@types/jwt-decode": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@types/jwt-decode/-/jwt-decode-3.1.0.tgz",
"integrity": "sha512-tthwik7TKkou3mVnBnvVuHnHElbjtdbM63pdBCbZTirCt3WAdM73Y79mOri7+ljsS99ZVwUFZHLMxJuJnv/z1w==",
"deprecated": "This is a stub types definition. jwt-decode provides its own type definitions, so you do not need this installed.",
"dependencies": {
"jwt-decode": "*"
}
},
"node_modules/@types/lodash": {
"version": "4.14.202",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
......
......@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@types/jwt-decode": "^3.1.0",
"axios": "^1.6.7",
"classnames": "^2.5.1",
"cypress": "^13.8.0",
......
import { useState, useEffect } from 'react';
import Cookies from 'js-cookie';
import {jwtDecode} from 'jwt-decode';
import React from 'react';
interface JwtPayload {
nama: string;
role: string;
}
const UserButton = () => {
const [nama, setNama] = useState('');
const [role, setRole] = useState('');
const [showDropdown, setShowDropdown] = useState(false);
const toggleDropdown = () => {
setShowDropdown(!showDropdown);
};
const handleLogout = () => {
Cookies.remove('token');
window.location.href = '/login';
};
useEffect(() => {
const token = Cookies.get('token');
if (token) {
const decoded: JwtPayload = jwtDecode(token); // Define the type of decoded as JwtPayload
setNama(decoded.nama);
setRole(decoded.role);
}
}, []);
return (
<div className="ml-auto relative">
<button
className="px-12 py-4 bg-gray-100 rounded-[51px] shadow flex-col justify-start inline-flex hover:bg-slate-200 w-56"
onClick={toggleDropdown} // Panggil fungsi toggleDropdown saat tombol diklik
>
<p className="text-neutral-900 text-2xl font-semibold font-['Poppins'] leading-9">{nama}</p>
<p className="text-gray-700 text-xl font-normal font-['Poppins']">{role}</p>
</button>
{/* Tampilkan dropdown jika showDropdown bernilai true */}
{showDropdown && (
<div className="absolute right-0 mt-2 w-56 bg-white shadow-lg rounded-lg">
<button className="block text-center px-4 py-2 text-gray-800 hover:bg-gray-100 w-full" onClick={handleLogout}>
Logout
</button>
</div>
)}
</div>
);
}
export default UserButton;
\ No newline at end of file
......@@ -4,6 +4,7 @@ import SMLogo from "../../../public/Logo_Seno_Medika.svg";
import Dropdown from "../components/dropdown";
import React, { useState, useEffect } from "react";
import axios from "axios";
import UserButton from "../components/user_button";
interface pasienData {
pasien_id: number;
......@@ -177,6 +178,7 @@ export default function DokterDashboard() {
<p className="text-gray-700 text-xl font-normal font-['Poppins']">Super Admin</p>
</button>
</div>
<UserButton />
</div>
<div className=" mt-11 ml-28 h-11 text-black text-5xl font-bold font-Poppins uppercase leading-10">
......
......@@ -66,80 +66,6 @@ export default class AppComponent{
theme: 'plain'
});
// autoTable(doc, {
// body: [
// [
// {
// content: 'Billed to:'
// +'\nJohn Doe'
// +'\nBilling Address line 1'
// +'\nBilling Address line 2'
// +'\nZip code - City'
// +'\nCountry',
// styles: {
// halign: 'left'
// }
// },
// {
// content: 'Shipping address:'
// +'\nJohn Doe'
// +'\nShipping Address line 1'
// +'\nShipping Address line 2'
// +'\nZip code - City'
// +'\nCountry',
// styles: {
// halign: 'left'
// }
// },
// {
// content: 'From:'
// +'\nCompany name'
// +'\nShipping Address line 1'
// +'\nShipping Address line 2'
// +'\nZip code - City'
// +'\nCountry',
// styles: {
// halign: 'right'
// }
// }
// ],
// ],
// theme: 'plain'
// });
// autoTable(doc, {
// body: [
// [
// {
// content: 'Amount due:',
// styles: {
// halign:'right',
// fontSize: 14
// }
// }
// ],
// [
// {
// content: '$4000',
// styles: {
// halign:'right',
// fontSize: 20,
// textColor: '#3366ff'
// }
// }
// ],
// [
// {
// content: 'Due date: 2022-02-01',
// styles: {
// halign:'right'
// }
// }
// ]
// ],
// theme: 'plain'
// });
autoTable(doc, {
body: [
[
......@@ -220,45 +146,7 @@ export default class AppComponent{
theme: 'plain'
});
// autoTable(doc, {
// body: [
// [
// {
// content: 'Terms & notes',
// styles: {
// halign: 'left',
// fontSize: 14
// }
// }
// ],
// [
// {
// content: 'orem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia'
// +'molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum'
// +'numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium',
// styles: {
// halign: 'left'
// }
// }
// ],
// ],
// theme: "plain"
// });
// autoTable(doc, {
// body: [
// [
// {
// content: 'This is a centered footer',
// styles: {
// halign: 'center'
// }
// }
// ]
// ],
// theme: "plain"
// });
return doc.save("invoice");
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment