horizontal card done

client/src/components/HorizontalCard.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, MouseEvent } from "react";
 import { AvatarList } from "./AvatarList";
 
 interface IProps {
@@ -7,6 +7,8 @@ interface IProps {
   tasksDone?: number;
   remainingDays?: number;
   avatars: string[];
+  validateTicket: (event: MouseEvent) => void;
+  archiveTicket: (event: MouseEvent) => void;
 }
 
 export const HorizontalCard: FC<IProps> = ({
@@ -14,23 +16,38 @@ export const HorizontalCard: FC<IProps> = ({
   tasksDone,
   tasksTotalCount,
   remainingDays,
-  avatars
+  avatars,
+  archiveTicket,
+  validateTicket
 }) => {
   return (
     <div className="col s12">
       <div className="card horizontal">
         <div className="card-stacked">
           <div className="card-content">
-            <h6>{title}</h6>
-            <AvatarList avatars={avatars} />
             <div className="row">
-              <i className="left material-icons">playlist_add_check</i>
-              <span>
-                {tasksDone}/{tasksTotalCount}
-              </span>
-
-              <div className="right">
+              <div className="card-title">
+                <h6>{title}</h6>
+              </div>
               <span>Due {remainingDays} days</span>
+              {/* <AvatarList avatars={avatars} /> */}
+              <div className="right">
+                {/* <i className=" material-icons">playlist_add_check</i>
+                <span>
+                  {" "}
+                  {tasksDone}/{tasksTotalCount}
+                </span> */}
+
+                <a>
+                  <i className="material-icons" onClick={validateTicket}>
+                    check
+                  </i>
+                </a>
+                <a>
+                  <i className="material-icons" onClick={archiveTicket}>
+                    archive
+                  </i>
+                </a>
               </div>
             </div>
           </div>

client/src/components/TabRouter.tsx

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { TabRouterHeader } from "./TabRouterHeader";
 import { TicketList } from "./TicketList";
 import { Ticket } from "../types/Ticket";
-import { Switch, Route, useRouteMatch } from "react-router-dom";
+import { Switch, Route, useRouteMatch, Redirect } from "react-router-dom";
 
 interface IProps {
   tickets: Ticket[];
@@ -26,6 +26,8 @@ export const TabRouter: FC<IProps> = ({
         <div className="row">
           <TabRouterHeader />
 
+          <Redirect from={url} to={`${url}/tickets`} />
+
           <Route path={`${url}/tickets`}>
             <TicketList
               tickets={tickets}

client/src/components/TicketList.tsx

@@ -18,6 +18,9 @@ export const TicketList: FC<TicketListProps> = ({
   remainingDays,
   avatars
 }) => {
+  const archiveTicket = () => {};
+  const validateTicket = () => {};
+
   return (
     <div className="col s12">
       <div className="row valign-wrapper">
@@ -38,6 +41,8 @@ export const TicketList: FC<TicketListProps> = ({
               tasksTotalCount={tasksTotalCount}
               remainingDays={remainingDays}
               avatars={avatars}
+              validateTicket={validateTicket}
+              archiveTicket={archiveTicket}
             />
           </li>
         ))}