feat: implement logout functionality in Dashboard and add UI components to Profile page
This commit is contained in:
@@ -40,6 +40,7 @@ export default function Dashboard() {
|
||||
addBarber,
|
||||
deleteBarber,
|
||||
updateShopDetails,
|
||||
logout,
|
||||
} = useApp();
|
||||
|
||||
const shop = useMemo(() => shops.find((s) => s.id === user?.shopId), [shops, user?.shopId]);
|
||||
|
||||
@@ -316,6 +316,54 @@ const styles = StyleSheet.create({
|
||||
roleBadge: { alignSelf: 'flex-start', backgroundColor: 'rgba(99,102,241,0.1)', borderRadius: 8, paddingHorizontal: 8, paddingVertical: 3, marginTop: 4 },
|
||||
roleText: { color: '#818cf8', fontSize: 10, fontWeight: '800', textTransform: 'uppercase' },
|
||||
reviewActions: { flexDirection: 'row', gap: 14 },
|
||||
sectionTitle: { color: '#f8fafc', fontSize: 18, fontWeight: '800', marginBottom: 12 },
|
||||
notifSection: { marginBottom: 32 },
|
||||
notifScroll: { marginHorizontal: -20, paddingHorizontal: 20 },
|
||||
notifCard: { backgroundColor: '#141420', width: 240, borderRadius: 20, padding: 16, marginRight: 12, borderWidth: 1, borderColor: 'rgba(255,255,255,0.06)', gap: 8, elevation: 2 },
|
||||
notifUnread: { borderColor: 'rgba(99,102,241,0.3)', backgroundColor: '#18182b' },
|
||||
notifMsg: { color: '#94a3b8', fontSize: 13, lineHeight: 18, fontWeight: '500' },
|
||||
markRead: { color: '#818cf8', fontSize: 12, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.5 },
|
||||
tabBar: { flexDirection: 'row', marginBottom: 24, borderBottomWidth: 1, borderBottomColor: 'rgba(255,255,255,0.06)' },
|
||||
tabItem: { paddingVertical: 14, marginRight: 24, position: 'relative' },
|
||||
tabActive: {},
|
||||
tabText: { color: '#64748b', fontSize: 15, fontWeight: '700' },
|
||||
tabTextActive: { color: '#f8fafc' },
|
||||
tabIndicator: { position: 'absolute', bottom: -1, left: 0, right: 0, height: 3, backgroundColor: '#6366f1', borderRadius: 4 },
|
||||
tabContent: { minHeight: 200 },
|
||||
listContainer: { gap: 16 },
|
||||
emptyTxt: { color: '#64748b', textAlign: 'center', marginTop: 20, fontWeight: '600' },
|
||||
subTitle: { color: '#64748b', fontSize: 13, fontWeight: '700', textTransform: 'uppercase', marginBottom: 8, letterSpacing: 1 },
|
||||
agendaCard: { padding: 16, gap: 12, backgroundColor: '#141420', borderRadius: 20, borderWidth: 1, borderColor: 'rgba(255,255,255,0.03)' },
|
||||
agendaTop: { flexDirection: 'row', alignItems: 'center', gap: 14 },
|
||||
dateBox: { backgroundColor: '#1c1c2e', padding: 10, borderRadius: 14, alignItems: 'center', minWidth: 55, borderWidth: 1, borderColor: 'rgba(255,255,255,0.05)' },
|
||||
dateDay: { color: '#f8fafc', fontSize: 20, fontWeight: '900' },
|
||||
dateMonth: { color: '#818cf8', fontSize: 10, fontWeight: '800', textTransform: 'uppercase' },
|
||||
agendaMain: { flex: 1, gap: 3 },
|
||||
agendaShop: { color: '#f8fafc', fontSize: 17, fontWeight: '800' },
|
||||
agendaTime: { color: '#64748b', fontSize: 13, fontWeight: '500' },
|
||||
statusTag: { paddingHorizontal: 12, paddingVertical: 6, borderRadius: 10 },
|
||||
statusText: { fontSize: 10, fontWeight: '900', textTransform: 'uppercase', letterSpacing: 0.5 },
|
||||
reviewBtn: { marginTop: 8, borderRadius: 12 },
|
||||
shopCard: { flexDirection: 'row', alignItems: 'center', gap: 14, padding: 16, backgroundColor: '#141420', borderRadius: 20, marginBottom: 4 },
|
||||
shopIcon: { width: 48, height: 48, borderRadius: 14, backgroundColor: 'rgba(99,102,241,0.05)', alignItems: 'center', justifyContent: 'center', borderWidth: 1, borderColor: 'rgba(99,102,241,0.1)' },
|
||||
shopIconText: { color: '#818cf8', fontSize: 20, fontWeight: '900' },
|
||||
shopName: { color: '#f8fafc', fontSize: 16, fontWeight: '800' },
|
||||
shopAddr: { color: '#475569', fontSize: 12, fontWeight: '500' },
|
||||
shopRating: { color: '#fbbf24', fontWeight: '900', fontSize: 14 },
|
||||
reviewCard: { padding: 18, gap: 10, backgroundColor: '#141420', borderRadius: 20 },
|
||||
reviewHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||||
reviewStars: { color: '#fbbf24', fontSize: 15 },
|
||||
reviewDate: { color: '#475569', fontSize: 12, fontWeight: '600' },
|
||||
reviewComment: { color: '#f8fafc', fontSize: 14, lineHeight: 20, fontWeight: '400' },
|
||||
statCard: { padding: 24, alignItems: 'center', gap: 6, backgroundColor: '#141420', borderRadius: 24, borderWidth: 1, borderColor: 'rgba(99,102,241,0.1)' },
|
||||
statLabel: { color: '#64748b', fontSize: 12, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1 },
|
||||
statValue: { color: '#f8fafc', fontSize: 28, fontWeight: '900' },
|
||||
reviewModal: { marginTop: 24, padding: 24, gap: 16, borderColor: 'rgba(99,102,241,0.3)', borderRadius: 24 },
|
||||
reviewTitle: { color: '#f8fafc', fontSize: 18, fontWeight: '800', textAlign: 'center' },
|
||||
stars: { flexDirection: 'row', justifyContent: 'center', gap: 12 },
|
||||
star: { fontSize: 36, color: '#1c1c2e' },
|
||||
starActive: { color: '#fbbf24' },
|
||||
reviewInput: { backgroundColor: '#1c1c2e', borderRadius: 16, padding: 16, color: '#f8fafc', height: 100, textAlignVertical: 'top', borderWidth: 1, borderColor: 'rgba(255,255,255,0.05)' },
|
||||
logoutSection: {
|
||||
marginTop: 60,
|
||||
paddingTop: 30,
|
||||
|
||||
Reference in New Issue
Block a user