Working on the README.md

src/components/ui/sliding-number.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import * as React from 'react';
+import {
+    useSpring,
+    useTransform,
+    motion,
+    useInView,
+    type MotionValue,
+    type SpringOptions,
+    type UseInViewOptions,
+} from 'motion/react';
+import useMeasure from 'react-use-measure';
+import {cn} from "@/lib/utils";
+
+
+type SlidingNumberRollerProps = {
+    prevValue: number;
+    value: number;
+    place: number;
+    transition: SpringOptions;
+};
+
+function SlidingNumberRoller({
+                                 prevValue,
+                                 value,
+                                 place,
+                                 transition,
+                             }: SlidingNumberRollerProps) {
+    const startNumber = Math.floor(prevValue / place) % 10;
+    const targetNumber = Math.floor(value / place) % 10;
+    const animatedValue = useSpring(startNumber, transition);
+
+    React.useEffect(() => {
+        animatedValue.set(targetNumber);
+    }, [targetNumber, animatedValue]);
+
+    const [measureRef, { height }] = useMeasure();
+
+    return (
+        <span
+            ref={measureRef}
+            data-slot="sliding-number-roller"
+            className="relative inline-block w-[1ch] overflow-x-visible overflow-y-clip leading-none tabular-nums"
+        >
+      <span className="invisible">0</span>
+            {Array.from({ length: 10 }, (_, i) => (
+                <SlidingNumberDisplay
+                    key={i}
+                    motionValue={animatedValue}
+                    number={i}
+                    height={height}
+                    transition={transition}
+                />
+            ))}
+    </span>
+    );
+}
+
+type SlidingNumberDisplayProps = {
+    motionValue: MotionValue<number>;
+    number: number;
+    height: number;
+    transition: SpringOptions;
+};
+
+function SlidingNumberDisplay({
+                                  motionValue,
+                                  number,
+                                  height,
+                                  transition,
+                              }: SlidingNumberDisplayProps) {
+    const y = useTransform(motionValue, (latest) => {
+        if (!height) return 0;
+        const currentNumber = latest % 10;
+        const offset = (10 + number - currentNumber) % 10;
+        let translateY = offset * height;
+        if (offset > 5) translateY -= 10 * height;
+        return translateY;
+    });
+
+    if (!height) {
+        return <span className="invisible absolute">{number}</span>;
+    }
+
+    return (
+        <motion.span
+            data-slot="sliding-number-display"
+            style={{ y }}
+            className="absolute inset-0 flex items-center justify-center"
+            transition={{ ...transition, type: 'spring' }}
+        >
+            {number}
+        </motion.span>
+    );
+}
+
+type SlidingNumberProps = React.ComponentProps<'span'> & {
+    number: number | string;
+    inView?: boolean;
+    inViewMargin?: UseInViewOptions['margin'];
+    inViewOnce?: boolean;
+    padStart?: boolean;
+    decimalSeparator?: string;
+    decimalPlaces?: number;
+    transition?: SpringOptions;
+};
+
+function SlidingNumber({
+                           ref,
+                           number,
+                           className,
+                           inView = false,
+                           inViewMargin = '0px',
+                           inViewOnce = true,
+                           padStart = false,
+                           decimalSeparator = '.',
+                           decimalPlaces = 0,
+                           transition = {
+                               stiffness: 200,
+                               damping: 20,
+                               mass: 0.4,
+                           },
+                           ...props
+                       }: SlidingNumberProps) {
+    const localRef = React.useRef<HTMLSpanElement>(null);
+    React.useImperativeHandle(ref, () => localRef.current!);
+
+    const inViewResult = useInView(localRef, {
+        once: inViewOnce,
+        margin: inViewMargin,
+    });
+    const isInView = !inView || inViewResult;
+
+    const prevNumberRef = React.useRef<number>(0);
+
+    const effectiveNumber = React.useMemo(
+        () => (!isInView ? 0 : Math.abs(Number(number))),
+        [number, isInView],
+    );
+
+    const formatNumber = React.useCallback(
+        (num: number) =>
+            decimalPlaces != null ? num.toFixed(decimalPlaces) : num.toString(),
+        [decimalPlaces],
+    );
+
+    const numberStr = formatNumber(effectiveNumber);
+    const [newIntStrRaw, newDecStrRaw = ''] = numberStr.split('.');
+    const newIntStr =
+        padStart && newIntStrRaw?.length === 1 ? '0' + newIntStrRaw : newIntStrRaw;
+
+    const prevFormatted = formatNumber(prevNumberRef.current);
+    const [prevIntStrRaw = '', prevDecStrRaw = ''] = prevFormatted.split('.');
+    const prevIntStr =
+        padStart && prevIntStrRaw.length === 1
+            ? '0' + prevIntStrRaw
+            : prevIntStrRaw;
+
+    const adjustedPrevInt = React.useMemo(() => {
+        return prevIntStr.length > (newIntStr?.length ?? 0)
+            ? prevIntStr.slice(-(newIntStr?.length ?? 0))
+            : prevIntStr.padStart(newIntStr?.length ?? 0, '0');
+    }, [prevIntStr, newIntStr]);
+
+    const adjustedPrevDec = React.useMemo(() => {
+        if (!newDecStrRaw) return '';
+        return prevDecStrRaw.length > newDecStrRaw.length
+            ? prevDecStrRaw.slice(0, newDecStrRaw.length)
+            : prevDecStrRaw.padEnd(newDecStrRaw.length, '0');
+    }, [prevDecStrRaw, newDecStrRaw]);
+
+    React.useEffect(() => {
+        if (isInView) prevNumberRef.current = effectiveNumber;
+    }, [effectiveNumber, isInView]);
+
+    const intDigitCount = newIntStr?.length ?? 0;
+    const intPlaces = React.useMemo(
+        () =>
+            Array.from({ length: intDigitCount }, (_, i) =>
+                Math.pow(10, intDigitCount - i - 1),
+            ),
+        [intDigitCount],
+    );
+    const decPlaces = React.useMemo(
+        () =>
+            newDecStrRaw
+                ? Array.from({ length: newDecStrRaw.length }, (_, i) =>
+                    Math.pow(10, newDecStrRaw.length - i - 1),
+                )
+                : [],
+        [newDecStrRaw],
+    );
+
+    const newDecValue = newDecStrRaw ? parseInt(newDecStrRaw, 10) : 0;
+    const prevDecValue = adjustedPrevDec ? parseInt(adjustedPrevDec, 10) : 0;
+
+    return (
+        <span
+            ref={localRef}
+            data-slot="sliding-number"
+            className={cn('flex items-center', className)}
+            {...props}
+        >
+      {isInView && Number(number) < 0 && <span className="mr-1">-</span>}
+
+            {intPlaces.map((place) => (
+                <SlidingNumberRoller
+                    key={`int-${place}`}
+                    prevValue={parseInt(adjustedPrevInt, 10)}
+                    value={parseInt(newIntStr ?? '0', 10)}
+                    place={place}
+                    transition={transition}
+                />
+            ))}
+
+            {newDecStrRaw && (
+                <>
+                    <span>{decimalSeparator}</span>
+                    {decPlaces.map((place) => (
+                        <SlidingNumberRoller
+                            key={`dec-${place}`}
+                            prevValue={prevDecValue}
+                            value={newDecValue}
+                            place={place}
+                            transition={transition}
+                        />
+                    ))}
+                </>
+            )}
+    </span>
+    );
+}
+
+export { SlidingNumber, type SlidingNumberProps };

src/components/wrappers/common/github/github-button.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import {GithubButton} from "@/components/ui/github-button";
+import * as React from "react";
+import {useEffect} from "react";
+
+export const GitHubStarsButtonCustom = () => {
+
+    const [stars, setStars] = React.useState(0);
+    const [isLoading, setIsLoading] = React.useState(true);
+
+    const username = "Soluce-Technologies"
+    const repo = "portabase"
+
+
+    useEffect(() => {
+        fetch(`https://api.github.com/repos/${username}/${repo}`)
+            .then((response) => response.json())
+            .then((data) => {
+                if (data && typeof data.stargazers_count === 'number') {
+                    setStars(data.stargazers_count);
+                }
+            })
+            .catch(console.error)
+            .finally(() => setIsLoading(false));
+    }, [username, repo]);
+
+    if (isLoading) return null;
+
+
+
+    return (
+        <div className=" gap-4 flex-wrap hidden md:block">
+            <GithubButton
+                initialStars={0}
+                targetStars={stars}
+                label="Github Stars"
+                size="sm"
+                separator={true}
+                roundStars={true}
+                repoUrl={`https://github.com/${username}/${repo}`}
+                variant="outline"
+            />
+        </div>
+    );
+};
+export default GitHubStarsButtonCustom;

src/components/wrappers/common/table/table-pagination-size.tsx

@@ -17,7 +17,7 @@ export const TablePaginationSize = (props: tablePaginationSizeProps) => {
 
     return (
         <div className={cn("flex items-center justify-end sm:justify-center space-x-2", className)}>
-            <p className="whitespace-nowrap text-sm font-medium">Rows per page</p>
+            <p className="whitespace-nowrap text-sm font-medium hidden md:block">Rows per page</p>
             <Select
                 value={`${table.getState().pagination.pageSize}`}
                 onValueChange={(value) => {

src/components/wrappers/common/table/table-pagination.tsx

@@ -15,9 +15,9 @@ export function TablePagination(props: tablePaginationProps) {
     const { className, table, maxVisiblePages = 3, pageSizeOptions = [10, 20, 30, 40, 50] } = props;
 
     return (
-        <div className={cn("flex flex-col gap-x-4 sm:flex-row", className)}>
+        <div className={cn("flex gap-x-4 flex-row w-full", className)}>
             <TablePaginationSize table={table} pageSizeOptions={pageSizeOptions} />
-            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end mt-5 sm:mt-0" />
+            <TablePaginationNavigation table={table} maxVisiblePages={maxVisiblePages} className="justify-end mt-0" />
         </div>
     );
 }

src/components/wrappers/dashboard/admin/admin-tabs.tsx

@@ -50,10 +50,10 @@ export const AdminTabs = ({users, settings, organizations}: AdminTabsProps) => {
                     Storage
                 </TabsTrigger>
             </TabsList>
-            <TabsContent value="users">
+            <TabsContent className="h-full" value="users">
                 <AdminUsersTable users={users}/>
             </TabsContent>
-            <TabsContent value="organizations">
+            <TabsContent className="h-full" value="organizations">
                 <AdminOrganizationsTable organizations={organizations}/>
             </TabsContent>
             <TabsContent value="email">

src/components/wrappers/dashboard/admin/tabs/admin-organizations-tab/admin-organizations-table.tsx

@@ -11,13 +11,13 @@ export type AdminOrganizationsTableProps = {
 export const AdminOrganizationsTable = (props: AdminOrganizationsTableProps) => {
     const {organizations} = props;
     return (
-        <div className="flex flex-col gap-y-4 h-full py-4">
-            <Card>
+        <div className="flex flex-col gap-y-4 h-full py-4 ">
+            <Card className="h-full">
                 <CardHeader>
                     <CardTitle>Active organizations</CardTitle>
                     <CardDescription>Manage all system organizations</CardDescription>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="h-full">
                     <AdminOrganizationList organizations={organizations} />
                 </CardContent>
             </Card>

src/components/wrappers/dashboard/admin/tabs/admin-organizations-tab/columns-organizations.tsx

@@ -11,7 +11,6 @@ import {deleteUserAction} from "@/components/wrappers/dashboard/profile/button-d
 import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
 import {UserWithAccounts} from "@/db/schema/02_user";
 import {authClient, useSession} from "@/lib/auth/auth-client";
-import {formatFrenchDate} from "@/utils/date-formatting";
 import {providerSwitch} from "@/components/wrappers/common/provider-switch";
 import {ButtonDeleteUser} from "@/components/wrappers/dashboard/admin/tabs/admin-user-tab/button-delete-use";
 import {Organization} from "@/db/schema/03_organization";

src/components/wrappers/dashboard/admin/tabs/admin-user-tab/admin-user-table.tsx

@@ -12,12 +12,12 @@ export const AdminUsersTable = (props: AdminUsersTableProps) => {
     const {users} = props;
     return (
         <div className="flex flex-col gap-y-4 h-full py-4">
-            <Card>
+            <Card className="h-full ">
                 <CardHeader>
                     <CardTitle>Active users</CardTitle>
                     <CardDescription>Manage your users</CardDescription>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="h-full">
                     <DataTable
                         enableSelect={false}
                         columns={usersColumnsAdmin}

src/components/wrappers/dashboard/admin/tabs/admin-user-tab/columns-users.tsx

@@ -6,14 +6,11 @@ import {useMutation} from "@tanstack/react-query";
 import {toast} from "sonner";
 import {useRouter} from "next/navigation";
 import {useState} from "react";
-import {Trash2} from "lucide-react";
-import {deleteUserAction} from "@/components/wrappers/dashboard/profile/button-delete-account/delete-account.action";
-import {ButtonWithLoading} from "@/components/wrappers/common/button/button-with-loading";
 import {UserWithAccounts} from "@/db/schema/02_user";
 import {authClient, useSession} from "@/lib/auth/auth-client";
-import {formatFrenchDate} from "@/utils/date-formatting";
 import {providerSwitch} from "@/components/wrappers/common/provider-switch";
 import {ButtonDeleteUser} from "@/components/wrappers/dashboard/admin/tabs/admin-user-tab/button-delete-use";
+import {formatLocalizedDate} from "@/utils/date-formatting";
 
 export const usersColumnsAdmin: ColumnDef<UserWithAccounts>[] = [
     {
@@ -88,7 +85,7 @@ export const usersColumnsAdmin: ColumnDef<UserWithAccounts>[] = [
         accessorKey: "updatedAt",
         header: "Updated At",
         cell: ({row}) => {
-            return formatFrenchDate(row.getValue("updatedAt"))
+            return formatLocalizedDate(row.getValue("updatedAt"))
         },
     },
     {