KrzysztofC/BIU_System_Rezerwacji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inicjalna wersja systemu zarządzania rezerwacjami (RMS)

Browse Source 
SPA zbudowane w React 19 + Vite 8 z pełnym zestawem funkcjonalności:
autentykacja z 2FA, kreator rezerwacji, panel admina, analityka,
GraphQL (Apollo Client + SchemaLink), React Query, Storybook,
testy jednostkowe (Vitest + RTL) i e2e (Playwright).
This commit is contained in:
Krzysztof Cieślik
2026-06-21 06:08:47 +02:00
commit f436d87ca5
99 changed files with 18696 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
src/components/UserManagement.module.scss Normal file
View File

@@ -0,0 +1,161 @@
@use '../styles/variables' as *;
.um {
display: flex;
flex-direction: column;
gap: $spacing-4;
&__msg {
padding: $spacing-8;
text-align: center;
color: var(--clr-text-secondary);
font-size: $font-size-sm;
}
&__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
}
&__count {
font-size: $font-size-sm;
color: var(--clr-text-secondary);
}
&__refresh {
display: inline-flex;
align-items: center;
gap: $spacing-1;
padding: $spacing-1 $spacing-3;
border: 1px solid var(--clr-border);
border-radius: $radius-base;
background: transparent;
font-size: $font-size-xs;
font-family: $font-family-base;
color: var(--clr-text-secondary);
cursor: pointer;
transition: background $transition-fast;
&:hover { background: var(--clr-surface-raised); }
&:disabled { opacity: 0.5; cursor: not-allowed; }
}
&__table-wrap {
overflow-x: auto;
border: 1px solid var(--clr-border);
border-radius: $radius-lg;
}
&__table {
width: 100%;
border-collapse: collapse;
font-size: $font-size-sm;
th {
background: var(--clr-surface-raised, #{$gray-50});
padding: $spacing-3 $spacing-4;
text-align: left;
font-size: $font-size-xs;
font-weight: $font-weight-semibold;
color: var(--clr-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--clr-border);
}
td {
padding: $spacing-3 $spacing-4;
border-bottom: 1px solid var(--clr-border);
color: var(--clr-text);
vertical-align: middle;
&:last-child { border-bottom: none; }
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--clr-surface-raised, #{$gray-50}); }
}
&__row--inactive td {
opacity: 0.55;
}
&__cell--email {
display: flex;
align-items: center;
gap: $spacing-1;
font-size: $font-size-xs;
color: var(--clr-text-secondary);
}
&__role-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: $primary-50;
border: 1px solid $primary-200;
border-radius: $radius-full;
padding: 2px $spacing-2;
font-size: $font-size-xs;
font-weight: $font-weight-medium;
font-family: $font-family-base;
color: $primary-700;
cursor: pointer;
transition: background $transition-fast;
&:hover { background: $primary-100; }
}
&__role-select {
padding: 2px $spacing-2;
border: 1px solid $primary-300;
border-radius: $radius-base;
font-size: $font-size-xs;
font-family: $font-family-base;
background: var(--clr-surface);
color: var(--clr-text);
outline: none;
}
&__status {
display: inline-block;
font-size: 11px;
font-weight: $font-weight-medium;
padding: 2px $spacing-2;
border-radius: $radius-full;
&--active { background: $accent-100; color: $accent-700; }
&--inactive { background: $gray-100; color: $gray-600; }
}
&__toggle {
display: inline-flex;
align-items: center;
gap: 4px;
padding: $spacing-1 $spacing-3;
border-radius: $radius-full;
font-size: $font-size-xs;
font-weight: $font-weight-medium;
font-family: $font-family-base;
cursor: pointer;
border: 1px solid transparent;
transition: background $transition-fast, opacity $transition-fast;
&:disabled { opacity: 0.5; cursor: not-allowed; }
&--deactivate {
background: #fee2e2;
color: #dc2626;
border-color: #fecaca;
&:hover:not(:disabled) { background: #fecaca; }
}
&--activate {
background: $accent-100;
color: $accent-700;
border-color: $accent-200;
&:hover:not(:disabled) { background: $accent-200; }
}
}
}