[Frontend] Owner 画面（椅子一覧、売上）、Client 画面モーダルに値段表示

frontend/app/components/modules/list/list-item.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps, PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+export function ListItem({
+  children,
+  className,
+  ...props
+}: PropsWithChildren<ComponentProps<"li">>) {
+  return (
+    <li {...props} className={twMerge("px-4 py-3 border-b", className)}>
+      {children}
+    </li>
+  );
+}

frontend/app/components/modules/list/list.tsx

@@ -0,0 +1,13 @@
+import { ComponentProps, PropsWithChildren } from "react";
+
+export function List({
+  children,
+  className,
+  ...props
+}: PropsWithChildren<ComponentProps<"ul">>) {
+  return (
+    <ul {...props} className={className}>
+      {children}
+    </ul>
+  );
+}

frontend/app/components/modules/owner-header/owner-header.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { useClientProviderContext } from "~/contexts/provider-context";
+
+export const OwnerHeader: FC = () => {
+  const { provider } = useClientProviderContext();
+
+  return (
+    <div className="flex items-center my-8 px-6">
+      {/* TODO: UI */}
+      <div className="border rounded-full size-16"></div>
+      <span className="text-2xl ms-4">{provider?.name}</span>
+    </div>
+  );
+};

frontend/app/components/modules/price-text/price-text.tsx

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef, FC } from "react";
+import { Text } from "~/components/primitives/text/text";
+
+type PriceTextProps = Omit<
+  ComponentPropsWithoutRef<typeof Text>,
+  "children"
+> & {
+  value: number;
+};
+
+const formatter = new Intl.NumberFormat("ja-JP");
+
+export const PriceText: FC<PriceTextProps> = ({ value, ...rest }) => {
+  return <Text {...rest}>{formatter.format(value)} 円</Text>;
+};

frontend/app/components/primitives/badge/badge.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "react";
+
+export const Badge = ({ children }: PropsWithChildren) => {
+  return (
+    <span className="border rounded-md border-gray-300 text-sm px-2 py-1">
+      {children}
+    </span>
+  );
+};

frontend/app/components/primitives/button/button.tsx

@@ -3,6 +3,7 @@ import { ComponentProps, FC, PropsWithChildren, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 
 type Variant = "light" | "primary" | "danger";
+type Size = "sm" | "md";
 
 export const ButtonLink: FC<PropsWithChildren<ComponentProps<typeof Link>>> = ({
   to,
@@ -25,8 +26,10 @@ export const ButtonLink: FC<PropsWithChildren<ComponentProps<typeof Link>>> = ({
 };
 
 export const Button: FC<
-  PropsWithChildren<ComponentProps<"button"> & { variant?: Variant }>
-> = ({ children, className, variant, ...props }) => {
+  PropsWithChildren<
+    ComponentProps<"button"> & { variant?: Variant; size?: Size }
+  >
+> = ({ children, className, variant, size = "md", ...props }) => {
   const variantClasses = useMemo(() => {
     switch (variant) {
       case "primary":
@@ -38,12 +41,23 @@ export const Button: FC<
         return "bg-[#F0EFED] active:brightness-90 hover:brightness-90 focus:brightness-90";
     }
   }, [variant]);
+
+  const sizeClasses = useMemo(() => {
+    switch (size) {
+      case "sm":
+        return "py-2 px-3";
+      case "md":
+        return "py-3 px-4";
+    }
+  }, [size]);
+
   return (
     <button
       type="button"
       className={twMerge(
-        "rounded-md bg-neutral-800 py-3 px-4 border border-transparent text-center text-sm transition-all shadow-md hover:shadow-lg  disabled:opacity-50 disabled:shadow-none ml-2",
+        "rounded-md bg-neutral-800 border border-transparent text-center text-sm transition-all shadow-md hover:shadow-lg disabled:opacity-50 disabled:shadow-none ml-2",
         variantClasses,
+        sizeClasses,
         className,
       )}
       {...props}

frontend/app/components/primitives/chair-model/chair-model.tsx

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { twMerge } from "tailwind-merge";
+import { CarGreenIcon } from "~/components/icon/car-green";
+import { CarRedIcon } from "~/components/icon/car-red";
+import { CarYellowIcon } from "~/components/icon/car-yellow";
+
+<CarRedIcon className="size-[76px] mb-4" />;
+
+export const ChairModel: FC<{ model: string; className?: string }> = (
+  props,
+) => {
+  const Chair = (() => {
+    // TODO: 仮実装
+    const model = props.model;
+    if (/^[a-n]/i.test(model)) return CarGreenIcon;
+    if (/^[o-z]/i.test(model)) return CarYellowIcon;
+    return CarRedIcon;
+  })();
+
+  return <Chair className={twMerge(["size-[1.5rem]", props.className])} />;
+};

frontend/app/components/primitives/form/date.tsx

@@ -0,0 +1,26 @@
+import { FC, PropsWithoutRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+type DateInputProps = PropsWithoutRef<{
+  id: string;
+  name: string;
+  className?: string;
+  required?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}>;
+
+export const DateInput: FC<DateInputProps> = (props) => {
+  return (
+    <input
+      type="date"
+      id={props.id}
+      name={props.name}
+      className={twMerge(
+        "mt-1 p-2 w-full border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+        props?.className,
+      )}
+      required={props.required}
+      onChange={props.onChange}
+    ></input>
+  );
+};

frontend/app/components/primitives/tab/tab.tsx

@@ -10,7 +10,7 @@ export const Tab = <T extends string>({
   onTabClick,
 }: TextProps<T>) => {
   return (
-    <nav className="border-b mb-4">
+    <nav className="border-b">
       <ul className="flex">
         {tabs.map((tab) => (
           <li

frontend/app/components/primitives/text/text.tsx

@@ -1,11 +1,12 @@
 import { FC, PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
 
-type Size = "xl" | "lg" | "sm" | "xs";
+type Size = "2xl" | "xl" | "lg" | "sm" | "xs";
 
 type Variant = "danger";
 
 type TextProps = PropsWithChildren<{
-  tagName?: "p" | "div";
+  tagName?: "p" | "div" | "span";
   bold?: boolean;
   size?: Size;
   variant?: Variant;
@@ -14,6 +15,8 @@ type TextProps = PropsWithChildren<{
 
 const getSizeClass = (size?: Size) => {
   switch (size) {
+    case "2xl":
+      return "text-2xl";
     case "xl":
       return "text-xl";
     case "lg":
@@ -47,14 +50,12 @@ export const Text: FC<TextProps> = ({
   const Tag = tagName;
   return (
     <Tag
-      className={[
+      className={twMerge([
         bold ? "font-bold" : "",
         getSizeClass(size),
         getVariantClass(variant),
         className,
-      ]
-        .filter(Boolean)
-        .join(" ")}
+      ])}
     >
       {children}
     </Tag>

frontend/app/contexts/provider-context.tsx

@@ -8,17 +8,18 @@ import {
   type ReactNode,
 } from "react";
 import {
+  OwnerGetChairsResponse,
   OwnerGetSalesResponse,
+  fetchOwnerGetChairs,
   fetchOwnerGetSales,
 } from "~/apiClient/apiComponents";
 
-type ProviderChair = { id: string; name: string };
-
 type ClientProviderRequest = Partial<{
-  chairs: ProviderChair[];
+  chairs: OwnerGetChairsResponse["chairs"];
   sales: OwnerGetSalesResponse;
-  provider: {
-    id?: string;
+  provider?: {
+    id: string;
+    name: string;
   };
 }>;
 
@@ -36,11 +37,14 @@ const DUMMY_DATA = {
 
 const ClientProviderContext = createContext<Partial<ClientProviderRequest>>({});
 
+const timestamp = (date: string) => Math.floor(new Date(date).getTime() / 1000);
+
 export const ProviderProvider = ({ children }: { children: ReactNode }) => {
   // TODO:
   const [searchParams] = useSearchParams();
 
   const id = searchParams.get("id") ?? undefined;
+  const name = searchParams.get("name") ?? undefined;
   const since = searchParams.get("since") ?? undefined;
   const until = searchParams.get("until") ?? undefined;
 
@@ -56,6 +60,7 @@ export const ProviderProvider = ({ children }: { children: ReactNode }) => {
     }
   }, []);
 
+  const [chairs, setChairs] = useState<OwnerGetChairsResponse>();
   const [sales, setSales] = useState<OwnerGetSalesResponse>();
 
   useEffect(() => {
@@ -67,14 +72,22 @@ export const ProviderProvider = ({ children }: { children: ReactNode }) => {
       });
     } else {
       const abortController = new AbortController();
-      (async () => {
-        setSales(
-          await fetchOwnerGetSales(
-            { queryParams: { since: Number(since), until: Number(until) } },
-            abortController.signal,
-          ),
-        );
-      })().catch((reason) => {
+      Promise.all([
+        fetchOwnerGetChairs({}, abortController.signal).then((res) =>
+          setChairs(res),
+        ),
+        since && until
+          ? fetchOwnerGetSales(
+              {
+                queryParams: {
+                  since: timestamp(since),
+                  until: timestamp(until),
+                },
+              },
+              abortController.signal,
+            ).then((res) => setSales(res))
+          : Promise.resolve(),
+      ]).catch((reason) => {
         if (typeof reason === "string") {
           console.error(`CONSOLE PROMISE ERROR: ${reason}`);
         }
@@ -83,20 +96,15 @@ export const ProviderProvider = ({ children }: { children: ReactNode }) => {
         abortController.abort();
       };
     }
-  }, [setSales, since, until, isDummy]);
+  }, [setChairs, setSales, since, until, isDummy]);
 
   const responseClientProvider = useMemo<ClientProviderRequest>(() => {
     return {
+      chairs: chairs?.chairs ?? [],
       sales,
-      chairs: sales?.chairs?.map((chair) => ({
-        id: chair.id,
-        name: chair.name,
-      })),
-      provider: {
-        id,
-      },
-    } satisfies ClientProviderRequest;
-  }, [sales, id]);
+      provider: id && name ? { id, name } : undefined,
+    };
+  }, [chairs, sales, id, name]);
 
   return (
     <ClientProviderContext.Provider value={responseClientProvider}>

frontend/app/routes/client._index/driving-state/carrying.tsx

@@ -1,11 +1,13 @@
 import { FC } from "react";
 import { CarGreenIcon } from "~/components/icon/car-green";
 import { LocationButton } from "~/components/modules/location-button/location-button";
+import { PriceText } from "~/components/modules/price-text/price-text";
 import { Text } from "~/components/primitives/text/text";
 import { Coordinate } from "~/types";
 
-export const Carrying: FC<{ destLocation?: Coordinate }> = ({
+export const Carrying: FC<{ destLocation?: Coordinate; fare?: number }> = ({
   destLocation,
+  fare,
 }) => {
   return (
     <div className="w-full h-full px-8 flex flex-col items-center justify-center">
@@ -16,6 +18,13 @@ export const Carrying: FC<{ destLocation?: Coordinate }> = ({
       <LocationButton label="現在地" className="w-80" />
       <Text size="xl">↓</Text>
       <LocationButton label="目的地" location={destLocation} className="w-80" />
+      <p className="mt-8">
+        {typeof fare === "number" ? (
+          <>
+            予定運賃: <PriceText tagName="span" value={fare} />
+          </>
+        ) : null}
+      </p>
     </div>
   );
 };

frontend/app/routes/client._index/driving-state/dispatched.tsx

@@ -1,11 +1,13 @@
 import { FC } from "react";
 import { CarYellowIcon } from "~/components/icon/car-yellow";
 import { LocationButton } from "~/components/modules/location-button/location-button";
+import { PriceText } from "~/components/modules/price-text/price-text";
 import { Text } from "~/components/primitives/text/text";
 import { Coordinate } from "~/types";
 
-export const Dispatched: FC<{ destLocation?: Coordinate }> = ({
+export const Dispatched: FC<{ destLocation?: Coordinate; fare?: number }> = ({
   destLocation,
+  fare,
 }) => {
   return (
     <div className="w-full h-full px-8 flex flex-col items-center justify-center">
@@ -16,6 +18,13 @@ export const Dispatched: FC<{ destLocation?: Coordinate }> = ({
       <LocationButton label="現在地" className="w-80" />
       <Text size="xl">↓</Text>
       <LocationButton label="目的地" location={destLocation} className="w-80" />
+      <p className="mt-8">
+        {typeof fare === "number" ? (
+          <>
+            予定運賃: <PriceText tagName="span" value={fare} />
+          </>
+        ) : null}
+      </p>
     </div>
   );
 };