fix admin responsive
deskrispi: - fix super admin table
This commit is contained in:
@@ -25,6 +25,9 @@ import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/_global/notif_
|
|||||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/_global/notif_global/notifikasi_gagal";
|
||||||
import adminDeveloper_funGetListAllUser from "./fun/get/fun_get_list_all_user";
|
import adminDeveloper_funGetListAllUser from "./fun/get/fun_get_list_all_user";
|
||||||
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
|
import { AdminColor } from "@/app_modules/_global/color/color_pallet";
|
||||||
|
import { Admin_V3_ComponentBreakpoint } from "../_components_v3/comp_simple_grid_breakpoint";
|
||||||
|
import { ComponentAdminGlobal_TitlePage } from "../_admin_global/_component";
|
||||||
|
import { Admin_V3_ComponentPaginationBreakpoint } from "../_components_v3/comp_pagination_breakpoint";
|
||||||
|
|
||||||
export default function AdminDeveloper({
|
export default function AdminDeveloper({
|
||||||
listUser,
|
listUser,
|
||||||
@@ -46,17 +49,7 @@ export default function AdminDeveloper({
|
|||||||
<>
|
<>
|
||||||
<Stack>
|
<Stack>
|
||||||
<ComponentAdminGlobal_HeaderTamplate name="Super Admin" />
|
<ComponentAdminGlobal_HeaderTamplate name="Super Admin" />
|
||||||
<SimpleGrid cols={2} spacing={50}>
|
<Admin_V3_ComponentBreakpoint>
|
||||||
{/* <TableAdmin
|
|
||||||
dataAdmin={dataAdmin}
|
|
||||||
setDataAdmin={setDataAdmin}
|
|
||||||
setDataUser={setDataUser}
|
|
||||||
/> */}
|
|
||||||
{/* <TableUser
|
|
||||||
dataUser={listUser}
|
|
||||||
setDataUser={setDataUser}
|
|
||||||
setDataAdmin={setDataAdmin}
|
|
||||||
/> */}
|
|
||||||
<NewTableAdmin
|
<NewTableAdmin
|
||||||
data={dataAdmin}
|
data={dataAdmin}
|
||||||
nPage={pageAdmin}
|
nPage={pageAdmin}
|
||||||
@@ -73,7 +66,7 @@ export default function AdminDeveloper({
|
|||||||
setPageAdmin(val.nPage);
|
setPageAdmin(val.nPage);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</SimpleGrid>
|
</Admin_V3_ComponentBreakpoint>
|
||||||
</Stack>
|
</Stack>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@@ -143,72 +136,65 @@ function NewTableUser({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Stack spacing={"xs"}>
|
<Stack spacing={"xs"}>
|
||||||
<Group
|
<ComponentAdminGlobal_TitlePage
|
||||||
position="apart"
|
name="Table User"
|
||||||
c={AdminColor.white}
|
color={AdminColor.softBlue}
|
||||||
bg={AdminColor.softBlue}
|
component={
|
||||||
p={"xs"}
|
<TextInput
|
||||||
style={{ borderRadius: "6px" }}
|
icon={<IconSearch size={20} />}
|
||||||
>
|
radius={"xl"}
|
||||||
<Title order={4}>Table User</Title>
|
placeholder="Masukan username"
|
||||||
<TextInput
|
|
||||||
icon={<IconSearch size={20} />}
|
|
||||||
radius={"xl"}
|
|
||||||
placeholder="Masukan username"
|
|
||||||
onChange={(val) => {
|
|
||||||
onSearch(val.currentTarget.value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
|
||||||
<Table
|
|
||||||
verticalSpacing={"xs"}
|
|
||||||
horizontalSpacing={"md"}
|
|
||||||
p={"md"}
|
|
||||||
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<Center c={AdminColor.white}>Username</Center>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<Center c={AdminColor.white}>Nomor</Center>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<Center c={AdminColor.white}>Aksi</Center>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{dataUser.map((v: any, i: any) => (
|
|
||||||
<tr key={v.id}>
|
|
||||||
<td>
|
|
||||||
<Center c={AdminColor.white}>{v.username}</Center>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Center c={AdminColor.white}>{v.nomor}</Center>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Center>
|
|
||||||
<Button radius={"xl"} onClick={() => onAccess(v.id)}>
|
|
||||||
Admin Access
|
|
||||||
</Button>
|
|
||||||
</Center>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
<Group sx={{ justifyContent: "flex-end" }} pt={10}>
|
|
||||||
<Pagination
|
|
||||||
value={isChoosePage}
|
|
||||||
onChange={(val) => {
|
onChange={(val) => {
|
||||||
onPageClick(val);
|
onSearch(val.currentTarget.value);
|
||||||
}}
|
}}
|
||||||
total={isNPage}
|
|
||||||
/>
|
/>
|
||||||
</Group>
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||||
|
<ScrollArea w={"100%"} h={"90%"}>
|
||||||
|
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<Center c={AdminColor.white}>Username</Center>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<Center c={AdminColor.white}>Nomor</Center>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<Center c={AdminColor.white}>Aksi</Center>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{dataUser.map((v: any, i: any) => (
|
||||||
|
<tr key={v.id}>
|
||||||
|
<td>
|
||||||
|
<Center c={AdminColor.white}>{v.username}</Center>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Center c={AdminColor.white}>{v.nomor}</Center>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Center>
|
||||||
|
<Button radius={"xl"} onClick={() => onAccess(v.id)}>
|
||||||
|
Admin Access
|
||||||
|
</Button>
|
||||||
|
</Center>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
</ScrollArea>
|
||||||
|
<Admin_V3_ComponentPaginationBreakpoint
|
||||||
|
value={isChoosePage}
|
||||||
|
onChange={(val) => {
|
||||||
|
onPageClick(val);
|
||||||
|
}}
|
||||||
|
total={isNPage}
|
||||||
|
/>
|
||||||
</Paper>
|
</Paper>
|
||||||
</Stack>
|
</Stack>
|
||||||
</>
|
</>
|
||||||
@@ -258,9 +244,6 @@ function NewTableAdmin({
|
|||||||
page: isChoosePage,
|
page: isChoosePage,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
setDataAdmin(loadData.data);
|
setDataAdmin(loadData.data);
|
||||||
setNPage(loadData.nPage);
|
setNPage(loadData.nPage);
|
||||||
const loadDataUser = await adminDeveloper_funGetListAllUser({ page: 1 });
|
const loadDataUser = await adminDeveloper_funGetListAllUser({ page: 1 });
|
||||||
@@ -281,76 +264,69 @@ function NewTableAdmin({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Stack spacing={"xs"}>
|
<Stack spacing={"xs"}>
|
||||||
<Group
|
<ComponentAdminGlobal_TitlePage
|
||||||
c={AdminColor.white}
|
name="Table Admin"
|
||||||
position="apart"
|
color={AdminColor.softBlue}
|
||||||
bg={AdminColor.softBlue}
|
component={
|
||||||
p={"xs"}
|
<TextInput
|
||||||
style={{ borderRadius: "6px" }}
|
icon={<IconSearch size={20} />}
|
||||||
>
|
radius={"xl"}
|
||||||
<Title order={4}>Table Admin</Title>
|
placeholder="Masukan username"
|
||||||
<TextInput
|
|
||||||
icon={<IconSearch size={20} />}
|
|
||||||
radius={"xl"}
|
|
||||||
placeholder="Masukan username"
|
|
||||||
onChange={(val) => {
|
|
||||||
onSearch(val.currentTarget.value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Group>
|
|
||||||
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
|
||||||
<Table
|
|
||||||
verticalSpacing={"xs"}
|
|
||||||
horizontalSpacing={"md"}
|
|
||||||
p={"md"}
|
|
||||||
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>
|
|
||||||
<Center c={AdminColor.white}>Username</Center>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<Center c={AdminColor.white}>Nomor</Center>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<Center c={AdminColor.white}>Aksi</Center>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{dataAdmin.map((v: any, i: any) => (
|
|
||||||
<tr key={v.id}>
|
|
||||||
<td>
|
|
||||||
<Center c={AdminColor.white}>{v.username}</Center>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Center c={AdminColor.white}>{v.nomor}</Center>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<Center>
|
|
||||||
<Button
|
|
||||||
radius={"xl"}
|
|
||||||
color="red"
|
|
||||||
onClick={() => onAccess(v.id)}
|
|
||||||
>
|
|
||||||
Delete Access
|
|
||||||
</Button>
|
|
||||||
</Center>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
<Group sx={{ justifyContent: "flex-end" }} pt={10}>
|
|
||||||
<Pagination
|
|
||||||
value={isChoosePage}
|
|
||||||
onChange={(val) => {
|
onChange={(val) => {
|
||||||
onPageClick(val);
|
onSearch(val.currentTarget.value);
|
||||||
}}
|
}}
|
||||||
total={isNPage}
|
|
||||||
/>
|
/>
|
||||||
</Group>
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"80vh"}>
|
||||||
|
<ScrollArea w={"100%"} h={"90%"}>
|
||||||
|
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>
|
||||||
|
<Center c={AdminColor.white}>Username</Center>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<Center c={AdminColor.white}>Nomor</Center>
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<Center c={AdminColor.white}>Aksi</Center>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{dataAdmin.map((v: any, i: any) => (
|
||||||
|
<tr key={v.id}>
|
||||||
|
<td>
|
||||||
|
<Center c={AdminColor.white}>{v.username}</Center>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Center c={AdminColor.white}>{v.nomor}</Center>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Center>
|
||||||
|
<Button
|
||||||
|
radius={"xl"}
|
||||||
|
color="red"
|
||||||
|
onClick={() => onAccess(v.id)}
|
||||||
|
>
|
||||||
|
Delete Access
|
||||||
|
</Button>
|
||||||
|
</Center>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
</ScrollArea>
|
||||||
|
<Admin_V3_ComponentPaginationBreakpoint
|
||||||
|
value={isChoosePage}
|
||||||
|
onChange={(val) => {
|
||||||
|
onPageClick(val);
|
||||||
|
}}
|
||||||
|
total={isNPage}
|
||||||
|
/>
|
||||||
</Paper>
|
</Paper>
|
||||||
</Stack>
|
</Stack>
|
||||||
</>
|
</>
|
||||||
@@ -409,7 +385,9 @@ function TableAdmin({
|
|||||||
p={"xs"}
|
p={"xs"}
|
||||||
style={{ borderRadius: "6px" }}
|
style={{ borderRadius: "6px" }}
|
||||||
>
|
>
|
||||||
<Title c={AdminColor.white} order={4}>Table Admin</Title>
|
<Title c={AdminColor.white} order={4}>
|
||||||
|
Table Admin
|
||||||
|
</Title>
|
||||||
<TextInput
|
<TextInput
|
||||||
icon={<IconSearch size={20} />}
|
icon={<IconSearch size={20} />}
|
||||||
radius={"xl"}
|
radius={"xl"}
|
||||||
@@ -417,12 +395,7 @@ function TableAdmin({
|
|||||||
/>
|
/>
|
||||||
</Group>
|
</Group>
|
||||||
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
||||||
<Table
|
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
|
||||||
verticalSpacing={"xs"}
|
|
||||||
horizontalSpacing={"md"}
|
|
||||||
p={"md"}
|
|
||||||
|
|
||||||
>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
@@ -496,7 +469,9 @@ function TableUser({
|
|||||||
p={"xs"}
|
p={"xs"}
|
||||||
style={{ borderRadius: "6px" }}
|
style={{ borderRadius: "6px" }}
|
||||||
>
|
>
|
||||||
<Title c={AdminColor.white} order={4}>Table User</Title>
|
<Title c={AdminColor.white} order={4}>
|
||||||
|
Table User
|
||||||
|
</Title>
|
||||||
<TextInput
|
<TextInput
|
||||||
icon={<IconSearch size={20} />}
|
icon={<IconSearch size={20} />}
|
||||||
radius={"xl"}
|
radius={"xl"}
|
||||||
@@ -504,12 +479,7 @@ function TableUser({
|
|||||||
/>
|
/>
|
||||||
</Group>
|
</Group>
|
||||||
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
<Paper p={"md"} bg={AdminColor.softBlue} h={"80vh"}>
|
||||||
<Table
|
<Table verticalSpacing={"xs"} horizontalSpacing={"md"} p={"md"}>
|
||||||
verticalSpacing={"xs"}
|
|
||||||
horizontalSpacing={"md"}
|
|
||||||
p={"md"}
|
|
||||||
|
|
||||||
>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
|
|||||||
Reference in New Issue
Block a user