fix responsive admin collaboration

src/app_modules/admin/_components_v3/comp_detail_data.tsx

@@ -1,16 +1,22 @@
 import { MainColor } from "@/app_modules/_global/color";
 import { Grid, Text } from "@mantine/core";
 
-export function Admin_V3_ComponentDetail({ item }: { item: Record<string, any> }) {
+export function Admin_V3_ComponentDetail({
+  item,
+}: {
+  item: Record<string, any>;
+}) {
   return (
     <>
       <Grid m={0} bg={MainColor.soft_darkblue}>
         <Grid.Col lg={3} md={3} sm={3} xs={3} span={4}>
-          <Text fw={"bold"}>{item.title}</Text>
+          <Text fw={"bold"}>{item.title || item.label}</Text>
         </Grid.Col>
 
         <Grid.Col span={"auto"}>
-          <Text>{item.value}</Text>
+          <Text>
+            {item.value} 
+          </Text>
         </Grid.Col>
       </Grid>
     </>

src/app_modules/admin/_components_v3/comp_pagination_breakpoint.tsx

@@ -17,7 +17,7 @@ export function Admin_V3_ComponentPaginationBreakpoint({
   return (
     <>
       <Pagination
-      mt={"xs"}
+        mt={"xs"}
         value={value}
         total={total}
         onChange={(val) => {
@@ -32,4 +32,4 @@ export function Admin_V3_ComponentPaginationBreakpoint({
       />
     </>
   );
-}
+}

src/app_modules/admin/_components_v3/comp_simple_grid_breakpoint.tsx

@@ -2,13 +2,15 @@ import { SimpleGrid } from "@mantine/core";
 
 export function Admin_V3_ComponentBreakpoint({
   children,
+  cols
 }: {
   children: React.ReactNode;
+  cols?: number;
 }) {
   return (
     <>
       <SimpleGrid
-        cols={2}
+        cols={cols || 2}
         breakpoints={[
           { maxWidth: "sm", cols: 1 },
           { maxWidth: "md", cols: 1 },

src/app_modules/admin/_components_v3/comp_skeleton_breakpoint.tsx

@@ -1,7 +1,11 @@
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
 import { SimpleGrid } from "@mantine/core";
 
-export function Admin_V3_ComponentSkeletonBreakpoint() {
+export function Admin_V3_ComponentSkeletonBreakpoint({
+  skeletonRequest,
+}: {
+  skeletonRequest?: number;
+}) {
   return (
     <>
       <SimpleGrid
@@ -12,7 +16,9 @@ export function Admin_V3_ComponentSkeletonBreakpoint() {
           { maxWidth: "lg", cols: 1 },
         ]}
       >
-        <CustomSkeleton height={500} width={"100%"} />
+        {Array.from({ length: skeletonRequest || 1 }, (_, index) => (
+          <CustomSkeleton key={index} height={500} width={"100%"} />
+        ))}
       </SimpleGrid>
     </>
   );