webkom · Bestem0r · Apr 13, 2026
diff --git a/lego-webapp/pages/lending/+Page.tsx b/lego-webapp/pages/lending/+Page.tsx
@@ -5,7 +5,10 @@ import { HeartHandshake } from 'lucide-react';
 import { useEffect, useState, useRef } from 'react';
 import { Helmet } from 'react-helmet-async';
 import { fetchAllLendableObjects } from '~/redux/actions/LendableObjectActions';
-import { fetchLendingRequests } from '~/redux/actions/LendingRequestActions';
+import {
+  editLendingRequest,
+  fetchLendingRequests,
+} from '~/redux/actions/LendingRequestActions';
 import { useAppDispatch, useAppSelector } from '~/redux/hooks';
 import { EntityType } from '~/redux/models/entities';
 import { selectLendableObjectsForIndex } from '~/redux/slices/lendableObjects';
@@ -16,26 +19,35 @@ import useQuery from '~/utils/useQuery';
 import FilterSearch from './FilterSearch';
 import ItemIndex from './ItemIndex';
 import styles from './LendingPage.module.css';
-import RequestInbox, { type LendingRequestOrdering } from './RequestInbox';
+import RequestInbox, {
+  type LendingRequestArchivedFilter,
+} from './RequestInbox';
 import {
   REQUEST_INBOX_PAGE_SIZE,
   getNextVisibleCount,
   getVisibleRequestCount,
   shouldFetchMoreRequests,
 } from './requestInboxPagination';
+import type { TransformedLendingRequest } from '~/redux/models/LendingRequest';
 
 const defaultLendingQuery = {
   search: '',
   lendingCategories: [] as FilterLendingCategory[],
-  ordering: '-created_at' as LendingRequestOrdering,
+  archived: 'false' as LendingRequestArchivedFilter,
 };
 
 const LendableObjectList = () => {
   const { query, setQueryValue } = useQuery(defaultLendingQuery);
-  const requestOrdering: LendingRequestOrdering =
-    query.ordering === 'created_at' ? 'created_at' : '-created_at';
+  const requestArchived: LendingRequestArchivedFilter =
+    query.archived === 'true' ? 'true' : 'false';
   const requestQuery = {
-    ordering: requestOrdering,
+    archived: requestArchived,
+  };
+  const activeRequestQuery = {
+    archived: 'false' as const,
+  };
+  const archivedRequestQuery = {
+    archived: 'true' as const,
   };
 
   const dispatch = useAppDispatch();
@@ -56,7 +68,7 @@ const LendableObjectList = () => {
           query: requestQuery,
         }),
       ),
-    [requestOrdering],
+    [requestArchived],
   );
 
   const { pagination: requestsPagination } = useAppSelector((state) =>
@@ -81,11 +93,11 @@ const LendableObjectList = () => {
     selectTransformedLendingRequests(state, { pagination: requestsPagination }),
   );
   const [visibleCount, setVisibleCount] = useState(REQUEST_INBOX_PAGE_SIZE);
-  const previousRequestOrderingRef = useRef(requestOrdering);
+  const previousRequestArchivedRef = useRef(requestArchived);
   const visibleRequestCount = getVisibleRequestCount({
     visibleCount,
-    currentOrdering: requestOrdering,
-    previousOrdering: previousRequestOrderingRef.current,
+    currentArchived: requestArchived,
+    previousArchived: previousRequestArchivedRef.current,
   });
 
   const lendingRequests = originalLendingRequests.slice(0, visibleRequestCount);
@@ -106,6 +118,17 @@ const LendableObjectList = () => {
     setVisibleCount(nextVisibleCount);
   };
 
+  const handleArchiveRequest = async (
+    requestId: TransformedLendingRequest['id'],
+    archived: boolean,
+  ) => {
+    await dispatch(editLendingRequest({ id: requestId, archived }));
+    await Promise.all([
+      dispatch(fetchLendingRequests({ query: activeRequestQuery })),
+      dispatch(fetchLendingRequests({ query: archivedRequestQuery })),
+    ]);
+  };
+
   const objectsActionGrant = useAppSelector(
     (state) => state.lendableObjects.actionGrant,
   );
@@ -137,9 +160,9 @@ const LendableObjectList = () => {
   };
 
   useEffect(() => {
-    previousRequestOrderingRef.current = requestOrdering;
+    previousRequestArchivedRef.current = requestArchived;
     setVisibleCount(REQUEST_INBOX_PAGE_SIZE);
-  }, [requestOrdering]);
+  }, [requestArchived]);
 
   useEffect(() => {
     if (!heartRef.current) return;
@@ -233,8 +256,9 @@ const LendableObjectList = () => {
           isFetching={requestsPagination.fetching}
           hasMore={requestsPagination.hasMore}
           onLoadMore={handleLoadMore}
-          ordering={requestOrdering}
-          onOrderingChange={setQueryValue('ordering')}
+          onArchive={handleArchiveRequest}
+          archived={requestArchived}
+          onArchivedChange={setQueryValue('archived')}
           className={styles.requestInbox}
         />
         <ItemIndex

diff --git a/lego-webapp/pages/lending/LendingRequestCard.tsx b/lego-webapp/pages/lending/LendingRequestCard.tsx
@@ -1,60 +1,87 @@
-import { Card, Flex, Icon, Image } from '@webkom/lego-bricks';
-import { MoveRight } from 'lucide-react';
+import { Button, Card, Flex, Icon, Image } from '@webkom/lego-bricks';
+import { Archive, MoveRight } from 'lucide-react';
 import Time from '~/components/Time';
 import LendingStatusTag from '~/pages/lending/LendingStatusTag';
 import { TransformedLendingRequest } from '~/redux/models/LendingRequest';
 import truncateString from '~/utils/truncateString';
 import styles from './RequestInbox.module.css';
+import type { MouseEvent } from 'react';
 
 const LendingRequestCard = ({
   lendingRequest,
   isFromAdmin,
+  onArchive,
 }: {
   lendingRequest: TransformedLendingRequest;
   isFromAdmin?: boolean;
+  onArchive?: (
+    requestId: TransformedLendingRequest['id'],
+    archived: boolean,
+  ) => void;
 }) => {
   if (!lendingRequest.lendableObject) {
     return null;
   }
 
+  const preventCardNavigation = (event: MouseEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
   return (
-    <a
-      href={`/lending/${lendingRequest.lendableObject.id}/request/${lendingRequest.id} ${
-        isFromAdmin ? '?fromAdmin=true' : ''
-      }
+    <Card className={styles.lendingRequestCard}>
+      <Flex column width="100%" gap="var(--spacing-sm)">
+        <a
+          href={`/lending/${lendingRequest.lendableObject.id}/request/${lendingRequest.id} ${
+            isFromAdmin ? '?fromAdmin=true' : ''
+          }
         `}
-    >
-      <Card className={styles.lendingRequestCard}>
-        <Flex width="100%">
-          <Flex>
-            <Flex column gap="var(--spacing-sm)">
-              <Flex column gap="var(--spacing-xs)">
-                <h4>
-                  {truncateString(lendingRequest.lendableObject.title, 30)}
-                </h4>
-                <Flex gap="var(--spacing-sm)">
-                  <Time time={lendingRequest.startDate} format="DD. MMM" />
-                  <Icon iconNode={<MoveRight />} size={19} />
-                  <Time time={lendingRequest.endDate} format="DD. MMM" />
+        >
+          <Flex width="100%">
+            <Flex width="100%">
+              <Flex>
+                <Flex column gap="var(--spacing-sm)">
+                  <Flex column gap="var(--spacing-xs)">
+                    <h4>
+                      {truncateString(lendingRequest.lendableObject.title, 30)}
+                    </h4>
+                    <Flex gap="var(--spacing-sm)">
+                      <Time time={lendingRequest.startDate} format="DD. MMM" />
+                      <Icon iconNode={<MoveRight />} size={19} />
+                      <Time time={lendingRequest.endDate} format="DD. MMM" />
+                    </Flex>
+                  </Flex>
+                  <div className={styles.tagContainer}>
+                    <LendingStatusTag
+                      lendingRequestStatus={lendingRequest.status}
+                    />
+                  </div>
                 </Flex>
               </Flex>
-              <div className={styles.tagContainer}>
-                <LendingStatusTag
-                  lendingRequestStatus={lendingRequest.status}
-                />
-              </div>
             </Flex>
+            <Image
+              className={styles.lendingRequestImage}
+              height={80}
+              width={80}
+              src={lendingRequest.lendableObject.image || '/icon-192x192.png'}
+              alt={lendingRequest.lendableObject.title}
+            />
           </Flex>
-        </Flex>
-        <Image
-          className={styles.lendingRequestImage}
-          height={80}
-          width={80}
-          src={lendingRequest.lendableObject.image || '/icon-192x192.png'}
-          alt={lendingRequest.lendableObject.title}
-        />
-      </Card>
-    </a>
+        </a>
+        {!isFromAdmin && (
+          <div onClick={preventCardNavigation}>
+            <Button
+              onPress={() =>
+                onArchive?.(lendingRequest.id, !lendingRequest.archived)
+              }
+            >
+              {lendingRequest.archived ? 'Fjern arkivering' : 'Arkiver'}
+              <Icon iconNode={<Archive />} size={19} />
+            </Button>
+          </div>
+        )}
+      </Flex>
+    </Card>
   );
 };
 

diff --git a/lego-webapp/pages/lending/RequestInbox.module.css b/lego-webapp/pages/lending/RequestInbox.module.css
@@ -67,12 +67,15 @@
   flex-direction: row;
   align-items: center;
   padding: var(--spacing-md);
-  color: var(--lego-font-color);
   transition:
     box-shadow var(--easing-fast),
     background-color var(--easing-fast);
 }
 
+.lendingRequestCard > div > a {
+  color: var(--lego-font-color);
+}
+
 .lendingRequestCard:hover {
   background-color: var(--additive-background);
 }

diff --git a/lego-webapp/pages/lending/RequestInbox.tsx b/lego-webapp/pages/lending/RequestInbox.tsx
@@ -10,11 +10,11 @@ import { canLoadMoreRequests } from './requestInboxPagination';
 import useAnimateRequestInbox from './useAnimateRequestInbox';
 import type { TransformedLendingRequest } from '~/redux/models/LendingRequest';
 
-export type LendingRequestOrdering = 'created_at' | '-created_at';
+export type LendingRequestArchivedFilter = 'true' | 'false';
 
-const orderingOptions: PillSwitchOption<LendingRequestOrdering>[] = [
-  { label: 'Nyeste', value: '-created_at' },
-  { label: 'Eldste', value: 'created_at' },
+const archivedOptions: PillSwitchOption<LendingRequestArchivedFilter>[] = [
+  { label: 'Aktiv', value: 'false' },
+  { label: 'Arkivert', value: 'true' },
 ];
 
 type Props = {
@@ -23,8 +23,12 @@ type Props = {
   isFetching: boolean;
   hasMore: boolean;
   onLoadMore: () => void;
-  ordering: LendingRequestOrdering;
-  onOrderingChange: (ordering: LendingRequestOrdering) => void;
+  onArchive: (
+    requestId: TransformedLendingRequest['id'],
+    archived: boolean,
+  ) => void;
+  archived: LendingRequestArchivedFilter;
+  onArchivedChange: (archived: LendingRequestArchivedFilter) => void;
   className?: string;
 };
 
@@ -34,8 +38,9 @@ const RequestInbox = ({
   isFetching,
   hasMore,
   onLoadMore,
-  ordering,
-  onOrderingChange,
+  onArchive,
+  archived,
+  onArchivedChange,
   className,
 }: Props) => {
   const listRef = useRef<HTMLDivElement>(null);
@@ -60,9 +65,11 @@ const RequestInbox = ({
       <div className={styles.headerRow}>
         <h3 className={styles.header}>Din innboks</h3>
         <PillSwitch
-          options={orderingOptions}
-          value={ordering}
-          onChange={onOrderingChange}
+          options={archivedOptions}
+          value={archived}
+          onChange={(value) =>
+            onArchivedChange(value === 'true' ? 'true' : 'false')
+          }
           ariaLabel="Sorter utlånsforespørsler"
         />
       </div>
@@ -73,13 +80,15 @@ const RequestInbox = ({
       )}
       {hasRequests && (
         <div ref={listRef} className={styles.lendingRequestsContainer}>
-          {lendingRequests.map((req) => (
+          {lendingRequests
+            .filter((req) => req.archived === (archived === 'true'))
+            .map((req) => (
             <div
               key={req.id}
               data-request-id={String(req.id)}
               className={styles.requestCardWrapper}
             >
-              <LendingRequestCard lendingRequest={req} />
+              <LendingRequestCard lendingRequest={req} onArchive={onArchive} />
             </div>
           ))}
         </div>

diff --git a/lego-webapp/pages/lending/requestInboxPagination.ts b/lego-webapp/pages/lending/requestInboxPagination.ts
@@ -5,14 +5,14 @@ export const getNextVisibleCount = (visibleCount: number) =>
 
 export const getVisibleRequestCount = ({
   visibleCount,
-  currentOrdering,
-  previousOrdering,
+  currentArchived,
+  previousArchived,
 }: {
   visibleCount: number;
-  currentOrdering: string;
-  previousOrdering: string;
+  currentArchived: string;
+  previousArchived: string;
 }) =>
-  currentOrdering === previousOrdering ? visibleCount : REQUEST_INBOX_PAGE_SIZE;
+  currentArchived === previousArchived ? visibleCount : REQUEST_INBOX_PAGE_SIZE;
 
 export const canLoadMoreRequests = ({
   hasMore,

diff --git a/lego-webapp/redux/models/LendingRequest.ts b/lego-webapp/redux/models/LendingRequest.ts
@@ -19,6 +19,7 @@ interface LendingRequest {
   updatedBy: EntityId;
   createdAt: Dateish;
   lendableObject: EntityId;
+  archived: boolean;
   status: LendingRequestStatus;
   startDate: Dateish;
   endDate: Dateish;
@@ -31,6 +32,7 @@ export type ListLendingRequest = Pick<
   | 'id'
   | 'createdBy'
   | 'lendableObject'
+  | 'archived'
   | 'status'
   | 'startDate'
   | 'endDate'
@@ -45,6 +47,7 @@ export type DetailLendingRequest = Pick<
   | 'createdAt'
   | 'updatedBy'
   | 'lendableObject'
+  | 'archived'
   | 'status'
   | 'startDate'
   | 'endDate'
@@ -65,7 +68,9 @@ export type CreateLendingRequest = Pick<
   'lendableObject' | 'startDate' | 'endDate'
 > & { comment: string };
 export type EditLendingRequest = Required<Pick<LendingRequest, 'id'>> &
-  Partial<Pick<LendingRequest, 'status' | 'startDate' | 'endDate'>>;
+  Partial<
+    Pick<LendingRequest, 'status' | 'startDate' | 'endDate' | 'archived'>
+  >;
 
 export type TimelineEntry = {
   id: EntityId;

diff --git a/lego-webapp/redux/slices/__tests__/lendingRequests.spec.ts b/lego-webapp/redux/slices/__tests__/lendingRequests.spec.ts
@@ -13,6 +13,7 @@ const createLendingRequest = (
   id,
   createdBy: 1,
   lendableObject: lendableObjectId,
+  archived: false,
   status: LendingRequestStatus.Created,
   startDate: '2026-01-01',
   endDate: '2026-01-02',