adm_tueit/TueIT_App
2
0
Fork 0
Code Issues 3 Pull Requests 3 Packages Projects Releases Wiki Activity

implemented rights and fixed some appearance bugs

Browse Source
This commit is contained in:
selina.mail
2024-03-26 22:54:13 +01:00
parent 3f88f6b821
commit 944b7d0503
19 changed files with 239 additions and 1009 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Dashboard.vue
View File

@ -22,10 +22,13 @@ import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const modeChangedLocalstorage = computed(() => store.state.modeDashboard);
const darkMode = ref('');
const getSession = async () => {
if (modeChangedLocalstorage.value) {
store.commit('resetModeDashboardChanged');
}
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;
@ -43,6 +46,7 @@ function getItem(item) {
}
watch(modeChanged, getSession)
watch(modeChangedLocalstorage, getSession)
onMounted(async () => {
await getSession();

22
components/LoginForm.vue
View File

@ -58,7 +58,7 @@ const store = useStore();
const { signIn } = useAuth()
// const router = useRouter();
const darkMode = ref('');
const darkMode = ref(true);
const isError = ref(false);
const showPassword = ref(false);
const errorMsg = ref('');
@ -104,6 +104,7 @@ const handleLogin = async () => {
// sucessfully logged in
router.push('/home')*/
let resBody = await signIn(credentials, { callbackUrl: '/home' })
// let resBody = await signIn(credentials, { callbackUrl: await delayRedirect(callbackUrl, delayInSeconds * 1000) });
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/login`);
setItem('logged-in-bool', true);
@ -121,9 +122,12 @@ const handleLogin = async () => {
setItem('logged-in-user-technicianBool', response.data.technicianBool)
setItem('logged-in-user-readerBool', response.data.readerBool)
setItem('logged-in-user-darkMode', response.data.darkModeBool)
setTimeout(() => {
}, 500);
store.commit('setLocalStorageChanged');
store.commit('setModeChanged');
store.commit('setModeQuickAccessChanged');
store.commit('setModeDashboardChanged');
store.commit('setModeNavbarChanged');
store.commit('setModeLayoutChanged');
} catch (err) {
console.log(err.response.statusText);
}
@ -189,12 +193,12 @@ const handleLogin = async () => {
// }
const getSession = async () => {
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;
} else {
darkMode.value = false;
}
// const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
// if (loggedInUserDarkModeBool == 1) {
// darkMode.value = true;
// } else {
// darkMode.value = false;
// }
}
function getItem(item) {

5
components/QuickAccess.vue
View File

@ -19,10 +19,14 @@ import { computed } from 'vue';
const store = useStore();
const modeChanged = computed(() => store.state.updateDarkMode);
const modeChangedLocalstorage = computed(() => store.state.modeQuickAccess);
const darkMode = ref('');
const getSession = async () => {
if (modeChangedLocalstorage.value) {
store.commit('resetModeQuickAccessChanged');
}
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;
@ -40,6 +44,7 @@ function getItem(item) {
}
watch(modeChanged, getSession)
watch(modeChangedLocalstorage, getSession)
onMounted(async () => {
await getSession();

186
components/server/AssetTableNoCustomer.vue
View File

@ -1,186 +0,0 @@
<!-- <template>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets:</div>
<table class="data-table" id="asset-table-no-customer">
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th
:class="['State', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
State</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
<td
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
...</td>
<td
:class="['State', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'State-darkmode' : 'State-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default {
name: "AssetTableNoCustomer",
};
</script>
<style scoped>
.data {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
align-self: stretch;
width: 100%;
padding: 1.25rem 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.div-darkmode {
background-color: #2c2c2c;
}
.div-lightmode {
background-color: #fff;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
.tr-head-lightmode {
border-top: none;
border-bottom: 0.0625rem solid #8e8e8e;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
height: 1.875rem;
text-align: left;
padding: 0;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.Name {
width: 50%;
}
.Name-darkmode {
border-right: 0.0625rem solid #000000;
}
.Name-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Type {
width: 20%;
}
.Type-darkmode {
border-right: 0.0625rem solid #000000;
}
.Type-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.State {
width: 20%;
}
.State-darkmode {
border-right: 0.0625rem solid #000000;
}
.State-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.User {
width: 10%;
}
.label {
width: 6.0625em;
height: 1.875em;
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
</style> -->

26
components/server/EmployeeTable.vue
View File

@ -54,17 +54,20 @@ const employeeFilter = computed(() => store.state.filteredByCustomer);
const darkMode = ref('')
const userList = ref([]);
const adminBool = ref(false);
//get all users
const getEmployees = async () => {
if (!(employeeFilter.value === '')) {
await getFilteredUsersByUser();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
userList.value = response.data;
} catch (err) {
console.log(err.response.statusText);
if (adminBool.value) {
if (!(employeeFilter.value === '')) {
await getFilteredUsersByUser();
} else {
try {
const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getAllEmployees`);
userList.value = response.data;
} catch (err) {
console.log(err.response.statusText);
}
}
}
}
@ -79,10 +82,15 @@ const getFilteredUsersByUser = async () => {
}
}
watch(employeeFilter, getEmployees);
const getSession = async () => {
const loggedInUserAdminBool = getItem('logged-in-user-adminBool');
if (loggedInUserAdminBool == 0) {
adminBool.value = false;
} else {
adminBool.value = true;
};
const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
if (loggedInUserDarkModeBool == 1) {
darkMode.value = true;

187
components/server/IssueSlipTableNoCustomer.vue
View File

@ -1,187 +0,0 @@
<!-- <template>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Issue slip:</div>
<table class="data-table" id="asset-table">
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID
</th>
<th
:class="['TicketNo', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
Ticket No.</th>
<th
:class="['CreationDate', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
Creation Date</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<td
:class="['TicketNo', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'TicketNo-darkmode' : 'TicketNo-lightmode']">
...</td>
<td
:class="['CreationDate', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'CreationDate-darkmode' : 'CreationDate-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default {
name: "IssueSlipTableNoCustomer",
};
</script>
<style scoped>
.data {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
align-self: stretch;
width: 100%;
padding: 1.25rem 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.div-darkmode {
background-color: #2c2c2c;
}
.div-lightmode {
background-color: #fff;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
.tr-head-lightmode {
border-top: none;
border-bottom: 0.0625rem solid #8e8e8e;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
height: 1.875rem;
text-align: left;
padding: 0;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.ID {
width: 47.5%;
}
.ID-darkmode {
border-right: 0.0625rem solid #000000;
}
.ID-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.TicketNo {
width: 23.75%;
}
.TicketNo-darkmode {
border-right: 0.0625rem solid #000000;
}
.TicketNo-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.CreationDate {
width: 23.75%;
}
.CreationDate-darkmode {
border-right: 0.0625rem solid #000000;
}
.CreationDate-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.User {
width: 5%;
}
.label {
width: 6.0625em;
height: 1.875em;
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}</style> -->

187
components/server/MaintenanceVisitsTemplateTableNoCustomer.vue
View File

@ -1,187 +0,0 @@
<!-- <template>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
<table class="data-table" id="maintenance-visits-templat-table-no-customer">
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID
</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
<td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<td
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default {
name: "MaintenanceVisitsTemplateTableNoCustomer",
};
</script>
<style scoped>
.data {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
align-self: stretch;
width: 100%;
padding: 1.25rem 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.div-darkmode {
background-color: #2c2c2c;
}
.div-lightmode {
background-color: #fff;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
.tr-head-lightmode {
border-top: none;
border-bottom: 0.0625rem solid #8e8e8e;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
height: 1.875rem;
text-align: left;
padding: 0;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.Name {
width: 50%;
}
.Name-darkmode {
border-right: 0.0625rem solid #000000;
}
.Name-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.ID {
width: 22.5%;
}
.ID-darkmode {
border-right: 0.0625rem solid #000000;
}
.ID-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Type {
width: 22.5%;
}
.Type-darkmode {
border-right: 0.0625rem solid #000000;
}
.Type-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.User {
width: 5%;
}
.label {
width: 6.0625em;
height: 1.875em;
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}</style> -->

168
components/server/ProductionOrdersTemplateTableNoCustomer.vue
View File

@ -1,168 +0,0 @@
<!-- <template>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Templates:</div>
<table class="data-table" id="production-orders-template-table-no-customer">
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
ID
</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
<td
:class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default {
name: "ProductionOrdersTemplateTableNoCustomer",
};
</script>
<style scoped>
.data {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
align-self: stretch;
width: 100%;
padding: 1.25rem 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.div-darkmode {
background-color: #2c2c2c;
}
.div-lightmode {
background-color: #fff;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
.tr-head-lightmode {
border-top: none;
border-bottom: 0.0625rem solid #8e8e8e;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
height: 1.875rem;
text-align: left;
padding: 0;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.Name {
width: 50%;
}
.Name-darkmode {
border-right: 0.0625rem solid #000000;
}
.Name-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.ID {
width: 40%;
}
.ID-darkmode {
border-right: 0.0625rem solid #000000;
}
.ID-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.User {
width: 10%;
}
.label {
width: 6.0625em;
height: 1.875em;
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}</style> -->

186
components/server/SolutionTableNoCustomer.vue
View File

@ -1,186 +0,0 @@
<!-- <template>
<div :class="['data', darkMode ? 'div-darkmode' : 'div-lightmode']">
<div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions:</div>
<table class="data-table" id="solution-table">
<tbody>
<tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
<th
:class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
Name</th>
<th
:class="['Asset', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
Asset</th>
<th
:class="['Type', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
Type</th>
<th :class="['User', darkMode ? 'th-darkmode' : 'th-lightmode']">User</th>
</tr>
<tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
<td
:class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
...</td>
<td
:class="['Asset', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Asset-darkmode' : 'Asset-lightmode']">
...</td>
<td
:class="['Type', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Type-darkmode' : 'Type-lightmode']">
...</td>
<td :class="['User', darkMode ? 'td-darkmode' : 'td-lightmode']">...</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from 'vue';
const darkMode = ref(true)
</script>
<script>
export default {
name: "SolutionTableNoCustomer",
};
</script>
<style scoped>
.data {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
align-self: stretch;
width: 100%;
padding: 1.25rem 1.875rem;
gap: 1.25rem;
border-radius: 0.625rem;
box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
}
.div-darkmode {
background-color: #2c2c2c;
}
.div-lightmode {
background-color: #fff;
}
.data-table {
width: 100%;
padding: 0 0.625rem;
table-layout: fixed;
border-collapse: collapse;
}
.table-row {
display: flex;
flex-direction: row;
align-items: center;
height: 3.125rem;
padding: 0.625rem;
gap: 0.625rem;
}
.tr-head-darkmode {
border-top: none;
border-bottom: 0.0625rem solid #000000;
}
.tr-head-lightmode {
border-top: none;
border-bottom: 0.0625rem solid #8e8e8e;
}
.tr-darkmode {
border-top: 0.0625rem solid #000000;
}
.tr-lightmode {
border-top: 0.0625rem solid #8e8e8e;
}
th,
td {
height: 1.875rem;
text-align: left;
padding: 0;
letter-spacing: 5%;
font: 400 0.875rem/1.875rem Overpass, sans-serif;
}
th {
font: 700 0.875rem/1.875rem Overpass, sans-serif;
}
.th-darkmode,
.td-darkmode {
color: #ffffff;
}
.th-lightmode,
.td-lightmode {
color: #000;
}
.Name {
width: 45%;
}
.Name-darkmode {
border-right: 0.0625rem solid #000000;
}
.Name-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Asset {
width: 22.5%;
}
.Asset-darkmode {
border-right: 0.0625rem solid #000000;
}
.Asset-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.Type {
width: 22.5%;
}
.Type-darkmode {
border-right: 0.0625rem solid #000000;
}
.Type-lightmode {
border-right: 0.0625rem solid #8e8e8e;
}
.User {
width: 10%;
}
.label {
width: 6.0625em;
height: 1.875em;
font-family: 'Overpass';
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.875em;
letter-spacing: 0.05em;
}
.label-darkmode {
color: #FFFFFF;
}
.label-lightmode {
color: #000;
}
</style> -->