feat: implement logout functionality in Dashboard and add UI components to Profile page

This commit is contained in:
2026-05-21 09:05:50 +01:00
parent 0c9c1ab6c2
commit 5cb96f0761
2 changed files with 49 additions and 0 deletions

View File

@@ -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]);

View File

@@ -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,