Finish preliminary making user settings, org settings styling similar to usage and billing page

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx

@@ -0,0 +1,44 @@
+import { faBan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+    Button
+} from "@app/components/v2";
+import { useRevokeMySessions } from "@app/hooks/api";
+
+import { SessionsTable } from "./SessionsTable";
+
+export const SessionsSection = () => {
+    const { mutateAsync } = useRevokeMySessions();
+    
+    const onRevokeAllSessionsClick = async () => {
+        try {
+            await mutateAsync();
+            window.location.href = "/login";
+        } catch (err) {
+            console.error(err);
+        }
+    }
+    
+    return (
+        <div className="p-4 mb-6 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+            <div className="flex justify-between mb-8">
+                <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
+                    Sessions
+                </h2>
+               <Button
+                    colorSchema="secondary"
+                    type="submit"
+                    leftIcon={<FontAwesomeIcon icon={faBan} />}
+                    onClick={onRevokeAllSessionsClick}
+                >
+                    Revoke all
+                </Button> 
+            </div>
+            <p className="text-gray-400 mb-8">
+                Logging into Infisical via browser or CLI creates a session. Revoking all sessions logs your account out all active sessions across all browsers and CLIs.
+            </p>
+            <SessionsTable />
+        </div>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsTable.tsx

@@ -0,0 +1,74 @@
+import { faServer } from "@fortawesome/free-solid-svg-icons";
+
+import {
+  EmptyState,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { useGetMySessions } from "@app/hooks/api";
+
+export const SessionsTable = () => {
+    const { data, isLoading } = useGetMySessions();
+
+    const formatDate = (dateToFormat: string) => {
+        const date = new Date(dateToFormat);
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        
+        const formattedDate = `${day}/${month}/${year}`;
+        
+        return formattedDate;
+    }
+    
+    return (
+        <TableContainer className="mt-4">
+            <Table>
+                <THead>
+                    <Tr>
+                        <Th>Created</Th>
+                        <Th>Last active</Th>
+                        <Th>IP address</Th>
+                        <Th>Device</Th>
+                    </Tr> 
+                </THead>
+                <TBody>
+                    {isLoading && <TableSkeleton columns={4} key="sesssions" />}
+                    {!isLoading && data && data.length > 0 && data.map(({
+                        _id,
+                        createdAt,
+                        lastUsed,
+                        ip,
+                        userAgent
+                    }) => {
+                        return (
+                            <Tr className="h-10" key={`session-${_id}`}>
+                                <Td>{formatDate(createdAt)}</Td>
+                                <Td>{formatDate(lastUsed)}</Td>
+                                <Td>{ip}</Td>
+                                <Td>{userAgent}</Td>
+                            </Tr>
+                        );
+                    })}
+                    {!isLoading && data && data?.length === 0 && (
+                        <Tr>
+                            <Td colSpan={4}>
+                                <EmptyState 
+                                    title="No sessions on file" 
+                                    icon={faServer}
+                                />
+                            </Td>
+                        </Tr>
+                    )}
+                </TBody>
+            </Table>
+        
+        </TableContainer>
+    );
+}

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/index.tsx

@@ -0,0 +1 @@
+export { SessionsSection } from "./SessionsSection";